即使在调用 jQuery 的 stopPropagation() 之后，单击事件处理程序也会无意中冒泡

Question

我试图为列表中“li”元素中的不同元素使用不同的委托单击处理程序。示例：

<ul id='myList'>
  <li>
    <p>First item.</p>
    <button>button1</button>
    <button>button2</button>
  </li>
  <li>
    <p>Second item.</p>
    <button>button1</button>
    <button>button2</button>
  </li>
</ul>

当用户单击（任何项目的）button1 时，我想捕获该事件，并停止传播（对于button2 实例也是如此）。用户单击父 li 元素将是一个不同的处理程序：

$('#myList').delegate('li', 'click', function() {
    alert("You clicked a parent <li> item!");
});

$('#myList').delegate('button', 'click', function(event) {
    event.stopPropagation();
    event.stopImmediatePropagation();
    alert("You clicked a button (but which one?)!");
});

因此，一个问题是，如何为 button1 实例拥有一个委托，并为 Button2 实例拥有另一个委托？上面示例中的第二个委托在单击按钮时确实会触发，但 event.stopPropagation() 似乎不起作用，因为父 li 项的处理程序仍然被调用，

------ Update ---- ----------

还尝试调用 event.stopImmediatePropagation()，但没有效果，父处理程序仍然被调用。

谢谢

Answer 1

也许在父级：

$('#myList').delegate('li', 'click', function(event) {
    if (!$(event.target).is('button')) {
        alert("You clicked a parent <li> item!");
    }
});

Answer 2

事实上，它应该可以工作，我尝试单步执行 jQuery 代码，但无济于事。相反，我做了这个：

(function(){
  var el = document.getElementsByTagName("li");
  var i = el.length;

  while (i--)
    el[i].onclick = function () {
      alert("You clicked a parent <li> item!");
    };

  el = document.getElementsByTagName("button");
  i = el.length;

  while (i--)
    el[i].onclick = function (event) {
      var e = event || window.event;

      e.stopPropagation();
      e.cancelBubble = true;
      alert("You clicked a button (but which one?)!");
    };

})();

它按照你想要的方式工作（尽管没有在 IE 中进行测试）。我太累了，现在，也许明天，我不想进一步研究这个问题。

回答您的其他问题：我认为您确实应该将 id 或 class 添加到您的 中，这样您就可以轻松地测试哪个按钮被调用。

Answer 3

您可以尝试event.stopImmediatePropagation()。从理论上讲，您所拥有的应该有效，因此扩展它可能会有所帮助。

Answer 4

原因是 .delegate() 只会在点击事件向下冒泡时执行点击函数myList 的子元素。然后它将执行每个匹配的委托，因此它在您的示例中正确调用了这两个委托，因为当单击到达 myList 时，它已经通过了 BUTTON 和 LI。

由于您在 BUTTON 之前绑定 LI，因此 LI 委托在被调用的列表中是第一个，因此您可以先绑定 BUTTON 委托，然后它应该可以工作。