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

Question

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

我的问题：我想要像 Inspector 那样的点击功能。我只想要我想要点击的元素。当我查看日志时，我输出了所有点击的元素，我注意到我想要点击的元素总是第一个写入控制台的元素。所以我现在的第一个想法是摆脱除第一个元素之外的所有元素，但我不知道如何将它们分开。我如何访问 edit/delete 来自 $(this) 的所有已单击元素？

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

代码和图像：

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

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

Answer 1

我刚刚找到了解决方案。在我的 click 函数中，我只能说 e.stopPropagation 来防止 jquery 走上 tree/dom 并在 parents.

上开火

完整解决方案：

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

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

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

这是一个更简洁的解决方案，因为只有一个 EventListener。当您想在不影响其他脚本的 eventListeners 的情况下删除这些时，这非常重要。在我的例子中，我有一个切换按钮，它将激活一个 element-highlighter（就像来自检查器的），我可以点击一个元素，然后将它与另一个元素进行比较。所以当我完成选择 2 个元素时，我需要 deactivate/delete 那些听众。有了这个解决方案，就容易多了。

Answer 2

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

编辑：

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

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

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

I select multiple Elements when I click, now I want only one of them (click function similar to the inspector from the browser)

html

javascript

jquery

jquery-selectors