Javascript jquery:on（'；单击'；，…）不'；t work，on（'；mouseenter'；，…）可以

如果有什么奇怪的问题，希望你们能帮我

在我的javascript代码中，我使用

<div class="..." id="getMoreOfX"><span class="...">More info</span></div>

不会抛出错误，但它不会执行任何操作。但奇怪的是，仅仅将“click”改为“mouseenter”（或“mouseleave”）就可以让它做它应该做的事情。尤其是这最后一个属性让我困惑

你知道是什么引起的吗

---

注意：jquery版本是1.7，我已经在FF、Opera和Chrome中对此进行了测试。

jquery中的事件委派工作原理是JavaScript中的事件在DOM树上冒泡（或传播）到文档。但是，如果在DOM中较低级别的元素上有事件处理程序，可以通过调用

event.stopPropagation（）

或

return false

，阻止这种传播，那么事件委派将不再起作用

例如，如果我有以下HTML：

<div id="outer">
  <div id="inner">
    Testing event delegation <br/>
    <input type="button" value="Click me" id="test-button"/>   
  </div>
</div>

然后单击该

中的任意位置将导致

内部

输出到控制台。但是，如果将以下事件处理程序添加到按钮：

$('#test-button').click(function(e) {
 return false; 
});

然后单击文本继续像以前一样工作-

internal

输出到控制台-但是单击按钮将不会输出任何内容，因为事件传播已被阻止

---

这可以在中观察到。

。还有其他问题。是否有其他事件处理程序绑定到

中返回false的元素作为回调函数的一部分？如果是这样的话，它们将阻止事件传播，从而破坏您的事件委派。如果你能生成一个JSFIDLE来复制你的问题，那会很有帮助。为什么不在用“X”替换ids之前，动态地展示一下你最初构建ids的过程呢。我打赌错误就在这里面。谢谢安东尼！你的回答让我走上了正确的轨道：div被放在一个谷歌地图信息框中，其中一个选项是“enableventpropagation:false”：（将其设置为真实确实会给出正确的行为。

$('#outer').on('click', '#inner', function(e) {
  console.log(this.id);
});

$('#test-button').click(function(e) {
 return false; 
});