ラップしているものにかかわらず、どの "a"タグがクリックされたときにクリックハンドラを処理する方法は？</p> <pre><code><a href="/foo">bar</a> <a href="/"> <div></div> </a> </code></pre> <p>そして、私はANY「」タグが（jQueryを使って）クリックされたときに処理ハンドラを書きたい：

Question

のは、私は私のHTMLページでこれを持っているとしましょう

$(document).click((e) => { 
    const element = e.target; 
    if (element && element.nodeName === 'A') { 
    // Do something 
    e.preventDefault(); 
    } 
}); 

以上にコードは一番上の "a"タグに対してのみ機能し、下のタグには機能しません。先頭の「a」タグの場合、element.nodeNameはAになります。下の「a」タグの場合、element.nodeNameはDIVになります。

ラップされているものに関係なく、任意の「a」タグがクリックされたときに処理するクリックハンドラを作成するにはどうすればよいですか？

Answer 1

キャプチャ任意の親要素の委任されたイベント。 バブリングフェーズの間に到着する前にpreventDefaultに電話しないと、ドキュメントはすべてのイベントを取得します。イベントのフェーズについては、それは本当に報われる！

$(document).on("click", "a", function(event) { 

    // You have clicked an anchor 
    window.console.log ("You have clicked this anchor:", this," but you clicked maybe inside a div or a something inside the <a>", event.target); 

}); 

https://jsfiddle.net/7ttm4y8k/4/

注：ドキュメントにイベントを委任されているように、これはさえハンドラが設定されています後に追加された要素のために動作します。この方法で、デリゲートされたアンカーハンドラをセットアップし、後で、作成されたすべてのアンカーにハンドラを設定する必要なく、Ajaxクエリからアンカーを追加することができます。

Answer 2

すべてのアンカーに適用します。

document.body.addEventListener('click', function(ev) { 
    var targetElement = ev.target; 
    while(targetElement !== null && targetElement.nodeName.toUpperCase() !== "A") { 
     targetElement = targetElement.parentElement; 
    } 

    // Proceed only if an A element was found in the ev.target's ancestry 
    if (targetElement !== null) { 
     ev.preventDefault(); 
     // Your code here 
    } 
} 

これはbodyタグでイベントをキャッチし、aタグが文書に追加/削除されることに気づかされる：

document.getElementsByTagName('a').map(tag => tag.onClick = yourHandler); 

Answer 3

は、これは私が（jQueryのO/W）、それを行う方法です。 clickイベントの伝播が、要素からbodyまでのDOMツリーの要素によって停止されていない限り、機能します。

Answer 4

https://jsfiddle.net/82fpvwrL/

$("a").click(function(){ 
     alert('WOO HOO! I was clicked.'); 
    }); 

Answer 5

を使用し、このような何か：

$(document).on("click","a", (e) => { 
    e.preventDefault(); 
    const element = e.target; 
    // Do something 
});