javascript - * 选择器上绑定(bind)单击事件时多次执行

Question

我正在构建一个 Chrome 扩展。在与网页交互的 content.js 中，我将点击事件绑定(bind)到所有元素。

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

$(function () {

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

    console.log("clicked");

    });
});

任何帮助将不胜感激:)

Answer 1

您可能不应该将点击事件绑定(bind)到页面上的每个元素，这是非常糟糕的做法。

相反，通过事件委托(delegate)，您可以将点击处理程序附加到主体，以对所有元素进行操作；

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

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