在*选择器上绑定单击事件时多次执行

Question

我正在构建Chrome扩展程序。在 content.js 中，与网页交互的那个，我将click事件绑定到所有元素。

Google官方文档称​​ content.js 中的任何内容都会像网页或应用程序中的普通js文件一样执行。由于我不熟悉jQuery，因此将事件绑定到所有元素时可能会出现问题。这是我使用的代码。

$(function () {

    $('*').on('click',function (event) {

    console.log("clicked");

    });
});

任何帮助将不胜感激：）

Answer 1

你可能不应该将click事件绑定到页面上的每个元素，这是非常糟糕的做法。

相反，通过event-delegation，您可以将单击处理程序附加到正文，以对所有元素执行操作;

$('body').on('click', '*', function (e) {
  e.stopPropagation();
  // do some stuff
});

将此与e.stopPropagation()相结合将确保点击事件只会被触发一次。您可以访问使用e.currentTarget实际点击的元素。