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

Question

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

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

谢谢！

Answer 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!'); 
});

这是一个小提琴

---

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

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

这是另一个小提琴

Answer 2

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

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

Answer 3

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

HTML

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

查询

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

JSFiddle 演示