将事件绑定到某个元素而不绑定到它的子元素 - JQuery答案

【问题标题】：Bind an event to some element without binding to it's child - JQuery将事件绑定到某个元素而不绑定到它的子元素 - JQuery
【发布时间】：2013-08-08 11:18:47
【问题描述】：

我有一些名为 mydiv 的 div。我有一个附加的点击事件。在 div 里面我有一个链接。我希望在单击链接后不触发事件。有点喜欢

$(document).on('click', '#mydiv a', function(){
    // How to disable parent's event here?
});

谢谢！

【问题讨论】：

stackoverflow.com/questions/2728252/…的可能重复

标签： jquery events

【解决方案1】：

您遇到的问题是绑定到div 的点击处理程序将首先触发，因为只有当事件传播到document 时，委托事件才会触发。

在您的#mydiv 点击处理程序中，在执行任何代码之前检查event.target === this，这样，它只会在点击div 时触发。

类似这样的：

$('#mydiv').on('click', function(e) {
    if (e.target === this) {
      alert('div click fired!'); 
    }
});

$(document).on('click', '#mydiv a', function(e) {
   alert('anchor click fired!'); 
});

Here's a fiddle

编辑如果您将事件处理程序附加到anchor 的唯一原因是为了防止触发div 上的点击处理程序，只需检查目标是否不是@987654331 @ 在div 中单击处理程序，然后再执行任何其他操作：

$('#mydiv').on('click', function(e) {
    if ($(e.target).is('a')) {
        return;
    }
    alert('div click fired!'); 
});

Here's another fiddle

【讨论】：

问题是附加到父级的事件是由Galleria插件附加的，我不知道它是如何附加的......

【解决方案2】：

这应该可以满足您的需求：

$(document).on('click', '#mydiv a', function(e){
    // How to disable parent's event here?
    e.stopPropagation();
});

【讨论】：

来自 jQuery 的文档，我是不是误会了？ “防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。”
如果事件没有被委派，它会起作用。事件处理程序附加到文档，因此它仅在到达文档时触发，此时div 上的单击处理程序已经触发
您还可以使用单个 JQuery 来处理 div 上的点击事件以及防止其子级上的点击事件

【解决方案3】：

试试这个，这样你就可以使用单个 JQuery

HTML

<div id="mydiv">
    <span> Hello, How are you? </span>
    <a id="alink" href="#"> Click ME </a>
</div>

JQUERY

$(document).on('click', '#mydiv', function(event){
   alert("You clicked on Div Span");
 }).children().find("#alink").click(function(e) {
  return false;
});

JSFiddle Demo

【讨论】：