1

chrome API (JavaScript) を使用して単純な DOM インスペクターを作成したいと思います (DOM 要素をクリックすると、要素に関する情報が表示される Firefox 開発者ツールの DOM インスペクターを知っています)。私はChromeブラウザを直接使用していませんが、Firefoxで使用されているChrome APIを使用しています。次のように addEventListener を使用してイベントを要素にバインドする方法を知っています。

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

しかし、上記のコードのターゲットは、特定の要素です。私の質問は、どの要素がクリックされるかわからないときにアイデアを実装する方法です。つまり、リスナーをすべての DOM 要素にバインドする必要がありますか? これには、より優れた、より簡単で普遍的な解決策があることを願っています。Firefox Webextensions の実装は Chrome と似ているはずなので、google-chrome API タグを追加します。

4

2 に答える 2

2

1 つのグローバル クリック リスナーをバインドするだけです。

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 に答える