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

所以我有一个页面设置，可以让您在点击时扩展文本框:

它会在单击时向元素添加一个“事件”类，如果您单击另一个文本框，则会将其删除。现在，如果您单击红色背景，我想删除该类(class)。我还想尽快向页面添加元素，因此重要的是此删除仅来自单击红色部分，即 <body>。元素。

所以这是我现在页面上的内容:(注意日志将被删除类替换)

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

问题是它会在你点击的任何地方记录“foo”，甚至直接在 li 的文本框上元素。我怎样才能使这项工作只有在点击背景时才能进行？

谢谢!

最佳答案

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

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

如果您真的想让 除 LI 之外的所有内容 都触发，您的代码需要看起来更像这样:

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

关于javascript - 将点击处理程序绑定(bind)到除特定 HTML 标记之外的所有元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11219149/