javascript - すべてのクリック イベントのキャプチャ
質問する
48002 次
11 に答える
41
イベント委任を使用する:
document.addEventListener(`click`, e => {
const origin = e.target.closest(`a`);
if (origin) {
console.clear();
console.log(`You clicked ${origin.href}`);
}
});<div>
<a href="#l1">some link</a>
<div><a href="#l2"><div><i>some other (nested) link</i></div></a></div>
</div>[編集 2020/08/20 ] 近代化
于 2012-09-23T11:37:34.843 に答える
29
window.onclick を使用してすべてのクリックを処理し、次に event.target を使用してフィルタリングできます。
あなたが尋ねた例：
<html>
<head>
<script type="text/javascript">
window.onclick = function(e) { alert(e.target);};
</script>
</head>
<body>
<a href="http://google.com">google</a>
<a href="http://yahoo.com">yahoo</a>
<a href="http://facebook.com">facebook</a>
</body>
</html>
于 2012-09-23T11:31:30.083 に答える
9
window.onclick = function (e) {
if (e.target.localName == 'a') {
console.log('a tag clicked!');
}
}
于 2012-09-23T11:43:55.907 に答える
5
イベントをウィンドウにデリゲートしてから、「event.target」がリンクであるかどうかを確認するというアイデアは、1 つの方法です (document.body の方がよいでしょう)。ここでの問題は、要素の子ノードをクリックすると機能しないことです。考え：
<a href="#"><b>I am bold</b></a>
これtargetは<b>要素であり、リンクではありません。これは、のチェックe.targetが機能しないことを意味します。したがって、クリックした要素が要素の子孫であるかどうかを確認するには、すべての dom ツリーをクロールする必要があります<a>。
クリックごとに必要な計算は少なくて済みますが、初期化のコストが高くなるもう 1 つの方法は、すべての<a>タグを取得してイベントをループにアタッチすることです。
var links = Array.prototype.slice.call(
document.getElementsByTagName('a')
);
var count = links.length;
for(var i = 0; i < count; i++) {
links[i].addEventListener('click', function(e) {
//your code here
});
}
(PS: なぜ HTMLCollection を配列に変換するのですか?これが答えです。 )
于 2012-09-23T11:48:27.577 に答える
2
jQuery を試して、
$('a').click(function(event) { *your code here* });
この関数では、次の方法で href 値を抽出できます。
$(this).attr('href')
于 2012-09-23T11:27:18.307 に答える
2
これを使用して試すこともできます：
var forEach = Array.prototype.forEach;
var links = document.getElementsByTagName('a');
forEach.call(links, function (link) {
link.onclick = function () {
console.log('Clicked');
}
});
それは機能します、私はちょうどテストしました！
実際のデモ: http://jsfiddle.net/CR7Sz/
コメントのどこかで、「href」値を取得したいと言ったので、次のようにします。
var forEach = Array.prototype.forEach;
var links = document.getElementsByTagName('a');
forEach.call(links, function (link) {
link.onclick = function () {
console.log(link.href); //use link.href for the value
}
});
于 2012-09-23T11:46:47.927 に答える
-3
非常に簡単です：
document.getElementById("YOUR_ID").onclick = function (e) {...}
セレクターはあなたが選択したいものなので、ボタンが呼び出されたとしましょう
<a href="#" id="button1">Button1</a>
これをキャプチャするコードは次のとおりです。
document.getElementById("button1").onclick = function (e) { alert('button1 clicked'); }
それが役立つことを願っています。
于 2012-09-23T11:34:16.750 に答える