为什么jQuery里面的event.target不起作用

Question

以下是代码，我正在尝试放置。这很简单，但是 event.target 不会触发，而其他正常的事件处理程序会起作用。

$(function($){
  
  var container = $('#container');
  
  function init() {
    container.on('click', open)
  }
  
  function open() {
  
    if(event.target === container) {
      alert ("hi");
    }  
  }
  
      init();

})(jQuery);

body, html {
  padding:0;
  margin:0;
}

#container {
  height: 500px;
  width:800px;
  margin:0 auto;
  background-color:#444;
}

h1{
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id = "container">
  <h1>Testing</h1>
</div>

第一个问题是，TypeError: $(...)。不是函数

第二个问题是，虽然在google chrome下也能用，但是还是显示上面的错误。

第三个错误是，虽然函数是在浏览器中运行的，但是当我放置，event.target === 容器命令时它不起作用。但是，如果我只是 console.log event.target，它会返回容器的 div id。但是，当我添加对 event.target 的检查时，它会停止工作。

我被卡住了，谁能帮我解释一下为什么会出现这个问题

谢谢

Answer 1

1. 这两个值都不是在 javascript 中引用相同的 对象引用。

$('#container') 是一个 jQuery 对象，要获取 HTML DOM 对象，您需要检索 Jquery 对象中的第零个元素。而 event.Target 返回 HTML DOM 元素。您要做的是比较不同的对象，因此该条件永远不会通过。

$('#container')是一个ID选择器，可以返回多个匹配的元素（HTML中多个元素相同的ID），所以需要获取Jquery Object返回的第0个元素。 Jquery Object 是 HTML 元素的包装器，包括其他属性和方法。

1. 从$(function($){ 中删除$，它基本上是一个IIFE 模式。

所以，你需要修改你的代码，如下所述。

(function($){
  
  var container = $('#container');
  
  function init() {
    container.on('click', open)
  }
  
  function open() {
    if(event.target === container[0]) {
      alert ("hi");
    }  
  }
  
      init();

})(jQuery);

body, html {
  padding:0;
  margin:0;
}

#container {
  height: 500px;
  width:800px;
  margin:0 auto;
  background-color:#444;
}

h1{
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id = "container">
  <h1>Testing</h1>
</div>