Question

我有这样的代码。

$('child').on('click', function(){ 
    ...
    $('parent').on('click', function () {
         doSomething();
    });
});

问题是在附加后立即调用父点击处理程序。可能是因为点击仍在处理中。我该如何防止这种情况？

Answer 1

扩展Punil的解决方案我建议像

Live Demo

$('#child').on('click', function(e){ 
  window.console && console.log("child click");
  e.stopPropagation();
  if (!$('#parent').data("clickhandler")) {
    $('#parent').data("clickhandler","already added");
    $('#parent').on('click', function(){ 
      window.console && console.log("parent clicked");
    });
  }    
  window.console && console.log("child clicked");
});

Answer 2

停止事件传播到其父元素和祖先元素。

$('child').on('click', function(evt) {
    evt.stopPropagation();

Answer 3

问题理解：
当执行单击child时，事件将传播到其parent，您已在子项单击期间为其添加了事件处理程序。所以在孩子的点击事件处理程序之后，父母的点击事件处理程序就会被触发。

<强>解决方案：
停止此行为的解决方案是在child的事件处理函数中添加e.stopPropagation第一件事，如：

$('child').on('click', function(e){ 
    e.stopPropagation;
    ...
    $('parent').on('click', function () {
        doSomething();
    });
});

<强>演示：
试试这个@ http://jsfiddle.net/purnil/DpVGq/

附加后调用单击处理程序

3 个答案: