1

我想使用 chrome API (JavaScript) 创建简单的 DOM 检查器（您知道 Firefox 开发人员工具中的 DOM 检查器，您可以在其中单击 DOM 元素，它将显示有关该元素的一些信息）。我不是直接使用 Chrome 浏览器，而是使用 Firefox 使用的 chrome API。我知道如何使用 addEventListener 将事件与元素绑定，如下所示：

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture, wantsUntrusted]); // Gecko

但是上面代码中的目标是某个指定的元素。我的问题是当我不知道将点击哪个元素时如何实现这个想法。我的意思是，我应该将侦听器绑定到所有 DOM 元素吗？希望有一些更好、更容易和通用的解决方案。我添加了 google-chrome API 标签，因为我认为 Firefox webextensions 中的实现应该与 Chrome 中的类似。

4

2 回答 2

2

您可以只绑定一个全局点击监听器：

document.addEventListener('click', function(e) {
  var element = e.target;
  // do anything you want with the element clicked
  console.log(element);
});
于 2016-07-19T16:10:48.037 回答
1

只需捕获文档的所有点击，这种方式使用jquery，但也可以在纯js中完成。然后使用event.target见下面的代码。我还包括 ie6-7 支持。

$(document).click(function(e) {
  // Support IE6-8
  var target = e.target || e.srcElement;
  console.log(target)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>blah blah blah div 1</div>
<span>blah blah blah span 1</span>
<p>blah blah blah p 1</p>

MDN 参考

于 2016-07-19T16:15:54.837 回答