javascript - タグ内の特定の要素のクリックがリンクアウトしないようにするにはどうすればよいですか?

Question

次のような HTML があります。

<a href="http://site.com">
  <span id="a">Click here to link to site.com</span>
  <span id="b">Click here not to link to site.com</span>
</a>

span#bDOM 構造を変更せずに、JavaScript だけで、クリックされたときに site.com にリンクされないようにするにはどうすればよいですか?

このプロジェクトでは jQuery を使用しているため、jQuery で実装することをお勧めします。

ありがとう、

アップデート：

申し訳ありませんが、特定の状況で機能するreturn falseか機能しないという回答が見つかりました。.stopPropagation()だから私はより多くの詳細をアップロードしました：

これは DOM ツリーです。申し訳ありませんが、いくつかの個人情報を非表示にする必要があります。

関連するコードは次のとおりです。

$('.span_wrapper').click(function(e){
  e.stopPropagation();
  alert('clicked');
  return false;
});

<a>外部タグの href 値に引き続きページにリンクします。

更新: これは私が何をしようとしていたかを説明するビデオです:

https://www.facebook.com/photo.php?v=10201864154343615

Answer 1

#bイベントが要素から要素に伝播/バブルアップするのを防ぐだけ<a>です:

$('#b').on('click', function(e) {
    e.preventDefault();
    // any other code to react to this click here
});

同じことを達成するための簡略版もあります（他のロジックがない場合）：

$('#b').on('click', false);

ドキュメントから：

この値falseは、単純に を実行する関数の省略形としても使用できreturn falseます。

return falsejQuery イベント ハンドラーから呼び出すことは、 と の両方event.stopPropagation()を呼び出すことと同じですevent.preventDefault()。関数の先頭で呼び出すことの利点e.preventDefault()は、残りのハンドラー関数の実行中にエラーがスローされた場合でも、リンクをたどることができないことです。

注: いつものように、要素を操作するときは、実行する前に要素が実際に存在することを確認する必要があります。</body>これは、DOM 対応ハンドラーを意味するか、スクリプトを HTML ドキュメントの最後、タグの直前に移動することを意味します。

Answer 2

このようなものはうまくいくと思います

$("a #b").click(function(){return false});

Answer 3

clickイベントの伝播を停止するspan#b

$('#b').click(function(e) {
   e.stopPropagation();
   return false;
});