我点击时选择多个元素，现在我只想要其中一个元素（点击与浏览器中的检查器类似的功能）

Question

我目前在$("body *")上有一个jquery选择器，这样当我点击某处时，我就会获得页面的单击元素。而且我也知道为什么我会收到超过1个元素。 （例如：如果我单击一个Button，所有父元素都有Click事件并且被触发了。）

我的问题：我想要一个像Inspector一样的点击功能。我只想要点击我想要的元素。当我看到日志，我输出所有点击的元素时，我注意到我想要点击的元素始终是第一个在控制台中编写的元素。所以我的第一个想法是现在除去第一个之外的所有元素，但我不知道如何将它们分开。如何访问和编辑/删除$(this)中所有点击的元素？

或者是否有其他更好的方法来获取点击的元素？

代码和图片：

$("body *").click(function (e) {
    console.log($(this));
});

现在，树中图像的所有元素都会写入控制台。

Answer 1

我刚刚找到了解决方案。在我的click函数中，我可以说e.stopPropagation以防止jquery走上树/ dom并且也会在父母身上开火。

完整解决方案：

$("body *").click(function (e) {
    e.stopPropagation();
    console.log($(this));
});

编辑：另一个解决方案显示Pango。不是给页面上的每个元素一个EventListener，你可以只给body元素一个EventListener，然后查看事件的目标。这将返回正确的点击元素。

$('body').on('click', function(e) {
    console.log(e.target); // target
    console.log($(this)); // body
});

由于只有一个EventListener，这是一个更清晰的解决方案。当您想要在不影响其他脚本的eventListeners的情况下删除它们时，这非常重要。在我的情况下，我有一个切换按钮，它将激活元素突出显示器（如来自检查器），我可以点击一个元素，然后将其与另一个元素进行比较。因此，当我完成选择2个元素时，我需要停用/删除这些监听器。使用此解决方案，它更容易。

Answer 2

我认为您正在寻找event.target，这是实际点击的元素。

编辑：

$('body').on('click', function(e) {
    console.log(e.target); // target
    console.log($(this)); // body
});

该代码会将click事件处理程序附加到正文。事件只会触发一次，而不是每个父亲一次，就像'body *'选择器一样。然后，您可以使用$（e.target）来获取实际点击的内容，$（this）将成为正文，并且不需要处理额外的父元素。