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：$（...）。不是一个功能

第二个问题是虽然它适用于谷歌浏览器，但它仍然显示上述错误。

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

我被困了，有人可以帮我解释为什么会出现这个问题

由于

Answer 1

两个值都不是指javascript中的相同对象引用。

$('#container')是一个jQuery对象，要获取HTML DOM对象，需要检索Jquery对象中的第0个元素。而event.Target返回HTML DOM元素。你要做的是比较不同的对象，因此这种情况永远不会过去。

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

从$移除$(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>

为什么jquery中的event.target不起作用

1 个答案: