0

私は生のJavaScriptにかなり慣れていません（jQueryの操作に慣れています）。いくつかのリンクのクリックをキャッチし、デフォルトのアクションを防止してから、リンクの href に基づいて何かを行う必要があります。

一部のリンクはまっすぐ<a href="example.com">Lorem</a>ですが、他の html 要素 (画像、スパンなど) を含むものもあります。同じイベント ハンドラーを必要なすべてのリンクにバインドします。私は回避策の関数を使用しますが、Chrome ではそれが使用するaddEventListener,useCaptureは false です。

私のイベント ハンドラーではevent.target.getAttribute('href')、リンクが指している場所を取得するために使用します。これは、最初の種類のリンクで作業している場合は機能しますが、画像またはスパンをクリックした場合は機能しません。これは、event.target がリンクではなく画像またはスパンであるためです。これはイベントのバブリングと関係があると推測していますが、解決策はよくわかりません。

4

1 に答える 1

4

イベント デリゲーション (推奨) を使用する場合、つまり 1 つのイベント ハンドラーのみをドキュメント ルートにバインドする場合は、DOM を上方向にトラバースして、それが要素event.target内にあるかどうかを確認する必要があります。A

var target = event.target;

while (target && target.nodeName !== 'A') {
    target = target.parentNode;
}

if (target) {
   // click was inside link
}

Aハンドラーを各要素に直接バインドする場合は、ハンドラーがバインドされている要素を参照するthis代わりにを使用できます。詳細については、イベント ハンドラを参照してください。event.targetthis

于 2012-12-20T09:38:30.773 に答える