web-dev-qa-db-ja.com

すべての<a>クリックイベントをキャプチャする

私は、HTMLページ内のすべての_<a>_クリックイベントをキャプチャするJavaScript関数を追加することを考えています。

したがって、すべての_<a>_クリックイベントを制御するグローバル関数を追加していますが、それぞれにonclickを追加していません（_.onclick=_もattachEvent(onclick...)もインライン_onclick=_も使用していません）。それぞれの_<a>_は、触れずにhtml内で_<a href="someurl">_と同じくらい単純にしておきます。

私はwindow.onclick = function (e) {...}を試しましたが、すべてのクリックをキャプチャしているだけです_<a>_のクリックのみを指定して、クリックされている_<a>_内のリンクを抽出するにはどうすればよいですか？

制限：jQueryのようなexraライブラリを使いたくありません。Vanillajavascriptだけを使います。

javascripteventscapture
19
user1589188

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>
17
Artur Udod

次のようなものを使用してください：

document.body.onclick = function(e){
  e = e || event;
  var from = findParent('a',e.target || e.srcElement);
  if (from){
     /* it's a link, actions here */
  }
}
//find first parent with tagName [tagname]
function findParent(tagname,el){
  while (el){
    if ((el.nodeName || el.tagName).toLowerCase()===tagname.toLowerCase()){
      return el;
    }
    el = el.parentNode;
  }
  return null;
}

この手法は event delegation と呼ばれます。

[編集する]リンク幅のネストされたhtml要素のクリックハンドラーを有効にする関数を追加しました。
<a ...><b><i>link text</i></b></a>

27
KooiInc
​window.onclick = function (e) {
    if (e.target.localName == 'a') {
        console.log('a tag clicked!');
    }
}​

作業デモ

9
xdazz

リンクを他の要素と入れ子にすることができ、ツリーを「a」要素にトラバースしたいことを考慮する必要があります。これは私にとってはうまくいきます：

window.onclick = function(e) {
  var node = e.target;
  while (node != undefined && node.localName != 'a') {
    node = node.parentNode;
  }
  if (node != undefined) {
    console.log(node.href);
    /* Your link handler here */
    return false;  // stop handling the click
  } else {
    return true;  // handle other clicks
  }
}

たとえば、 https://jsfiddle.net/hnmdijkema/nn5akf3b/6/

4
Hans Dijkema

イベントをウィンドウに委任し、「event.target」がリンクであるかどうかを確認するというアイデアは、1つの方法です（document.bodyのほうがよいでしょう）。ここでの問題は、要素の子ノードをクリックしても機能しないことです。考える：

<a href="#"><b>I am bold</b></a>

targetは<b>要素であり、リンクではありません。 これは、e.targetのチェックが機能しないことを意味します。したがって、クリックされた要素が<a>要素の子孫であるかどうかを確認するには、すべてのdomツリーをクロールする必要があります。

クリックごとの計算は少なくて済みますが、初期化にコストがかかるもう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を配列に変換するのですか？ これが答えです ）

3
Roman

JQueryを試してみてください

$('a').click(function(event) { *your code here* });

この関数では、次の方法でhref値を抽出できます。

$(this).attr('href')
1
FLCL

受け入れられた回答の一部は、次のようなネストされた要素では機能しません：<a href="..."><font><u>link</u></font></a>

ほとんどの場合、基本的な解決策があります： `` `

var links = document.getElementsByTagName('a');
for(var i in links)
{
    links[i].onclick = function(e){
        e.preventDefault();
        var href = this.href;
        // ... do what you need here.
    }
}
1
MichałKraków

これを使ってみることもできます：

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
    }

});

デモ： http://jsfiddle.net/CR7Sz/1/

1
Akshat Mittal

この単純なコードはjqueryで動作すると思います。

 $("a").click(function(){
    alert($(this).attr('href'));
});

JQueryなし：

window.onclick = function(e) { 
if(e.target.localName=='a')
    alert(e.target);
};

上記は同じ結果になります。

0
Vishal Srinivasan