javascript - 将点击处理程序绑定到除特定 HTML 标记之外的所有元素

Question

因此，我有一个页面设置，可让您在单击时扩展文本框：

它会在单击时向元素添加一个“活动”类，如果单击另一个文本框则将其删除。现在，如果您单击红色背景，我想删除该课程。我还想尽快将元素添加到页面中，因此重要的是仅通过单击作为<body>元素的红色部分来进行删除。

所以这就是我现在在页面上的内容：（注意日志将被删除类所取代）

$('*:not(li)').click(function(){
    console.log('foo')
});

问题是它会在您单击的任何地方记录“foo”，甚至直接在作为li元素的文本框上。如何仅在单击背景时才能使这项工作？

谢谢！

score 2 · Accepted Answer

您的问题是您正在冒泡 HTML 堆栈。通过将处理程序放在所有内容上，即使您单击 LI，事件也会冒泡到其 UL。同样， $('body') 会导致冒泡问题。

你最好在主堆栈之外创建一个 div 来处理这个问题。想象一下在大部分页面后面有一个绝对定位的 div。

如果你真的想让除了 LI 之外的所有东西都触发，你的代码需要看起来更像这样：

$('*:not(li)').click(function(){
// do something.
});
$('li').click(function(evt){
// do something else.
    evt.stopPropagation();
});

1 回答 1