HTMLページにこれがあるとしましょう：
<a href="/foo">bar</a>
<a href="/">
<div></div>
</a>
そして、（jQueryを使用して）任意の「a」タグがクリックされたときに処理するハンドラーを作成したいと思います。
$(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」タグがクリックされるたびに処理するクリックハンドラーを作成するにはどうすればよいですか？
委任されたイベントを任意の親要素でキャプチャします。バブリングフェーズ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クエリからアンカーを追加できます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加