Question

所以我有一个页面设置，让你在点击时消耗文本框：

它会在单击时向元素添加“活动”类，如果单击另一个文本框，则将其删除。现在，如果您点击红色背景，我想要删除该课程。我还想在短时间内向页面添加元素，因此重要的是此删除仅来自单击红色部分<body>元素。

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

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

问题是它在你点击的任何地方记录'foo'，甚至直接在li个元素的文本框上。如何只在点击背景后才能完成这项工作？

谢谢！

Answer 1

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

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

如果你真的希望所有解雇除了LI之外，你的代码需要看起来更像这样：

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