1

jsfiddle.net のデモ

HTML:

<a href='http://www.jsfiddle.net'><span>link</span></a>

脚本：

$('span').click(function(event) {
  window.open('http://www.google.com');
  event.stopImmediatePropagation();
  //The line below does prevent jsfiddle.net from loading on the right.
  //event.preventDefault();
});
$('a').click(function() {
  //This function is not triggered as event propagation has been stopped.
  alert('You will never see this.');
});

デモの「リンク」をクリックすると、google.com と jsfiddle.net の両方が開きます。ここに私の質問があります: <a>(この場合は jsfiddle.net を開く) のデフォルトの動作がその子 (この場合)<span>に継承されるのはなぜですか? 参照できる仕様はありますか? 前もって感謝します。

4

2 に答える 2

2

の既定の動作が<a>その子によって継承されるのはなぜですか?

それは理にかなっているからです :-) リンクまたはその子孫をクリックするたびに、デフォルトのアクションがリンクをアクティブにするイベントをトリガーします。

参照できる仕様はありますか?

キャンセルの説明については、DOM レベル 3 仕様のデフォルト アクションとキャンセル可能なイベントを確認してください。ただし、DOM3 は独自にデフォルト アクションを指定しません。

これらは HTML 5 仕様で行われ、特にインタラクティブ コンテンツセクションでのクリックに対して行われます。

ポインティング デバイスがクリックされると、ユーザー エージェントは次の手順を実行する必要があります。

  1. [いくつかのフラグを設定]
  2. もしあれば、ユーザーによって指定された要素eの最も近いアクティブ化可能な要素とします。それを取得するには、ターゲットにアクティブ化動作が定義されているかどうかを確認します。存在する場合はそれを取得し、存在しない場合 (および親要素がある場合)は、ターゲットの親要素でチェックを繰り返します。
  3. 要素がある場合は、eクリック前のアクティブ化手順を実行します。
  4. click必要なイベントをディスパッチします。
  5. 要素がeあり、クリック イベントがキャンセルされない場合は、クリック後のアクティブ化手順があればそれを実行します。
  6. 要素がeあり、イベントがキャンセルされた場合、キャンセルされたアクティベーション手順があれば実行します。
  7. 【フラグリセット】

アクティブ化の動作は要素自体によって定義されます。たとえば、<a>要素でハイパーリンクを取得してたどります。

于 2013-10-28T09:58:36.373 に答える