Question

如果在单击父div之前未创建div的单击，我怎么可能停止传播？

HTML

<div id = "parent"> Some Stuff </div>

Jquery的

$('#parent').click(function(){
  $(this).append('<div class = 'button'> Button One </div>');
});

$('#parent').on('click', '.button', function(){
   // Do some stuff but stop propagation
});

我必须控制附加到父元素的按钮，但父元素也有自己要触发的事件。如果在此处无法使用e.stopPropagation，我该怎么做才能阻止按钮触发父事件？

Answer 1

您可以颠倒创建#parent事件处理程序的顺序：

$('#parent').on('click', '.button', function(){
   return false;
});

$('#parent').click(function(){
    $(this).append('<div class = 'button'> Button One </div>');
});

现在#parent的{{1}}事件处理程序将在其append事件处理程序执行之前触发。从此返回false（相当于e.stopPropagation和e.preventDefault）将阻止第二个事件处理程序运行。

Demo here

Answer 2

如果我理解你的话，你需要在单击.button div时停止#parent div click事件，以便不添加更多.button div's

如果e.target是.button，你可以做一个小的检查，然后从#parent点击处理程序退出

检查以下示例

$('#parent').click(function(e){
  if($(e.target).is('.button'))
      return;
  alert('parentClick');
  $(this).append('<div class = "button"> Button One </div>');
});

$('#parent').on('click', '.button', function(){
    alert('buttonClick');
});

对点击处理程序的jquery进行stopPropagation

2 个答案: