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

Question

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

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

$(function () {

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

    console.log("clicked");

    });
});

任何帮助将不胜感激:)

Answer 1

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

相反，通过 event-delegation，您可以将点击处理程序附加到主体，以作用于所有元素；

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

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