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

Question

我有一个名为mydiv的div。我附加了一个点击事件。在div里面我有一个链接。我希望点击链接后不会触发事件。像Smth一样

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

谢谢！

Answer 1

这应该做你想要的：

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

Answer 2

您遇到的问题是绑定到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上的点击处理程序，只需检查是否在执行任何其他操作之前，目标不是anchor点击处理程序中的div：

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

Here's another fiddle

Answer 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