javascript - ネストされた href タグで stopPropagation が機能しない

Question

次のように複数の div がリストされています。

<div class="msg-list clearfix" id="27705">
  <div class="thumbnail_image">
    <a href="some_path">AnchorText</a>
  </div>
  <div class="msg-date">DATA</div>
</div>

親divのクリックイベントをキャッチしようとしましたが、href要素をクリックすると、クリックされたリンクをたどるだけでなく、クリックイベントもトリガーされます。

これが私のjquery呼び出しです：

//$(".msg-list a").click(function(e) {
$(".msg-list").click(function(e) {

    e.stopPropagation(); 
    alert("Handler for .click() called.");
});

私が見逃しているものはありますか？

Answer 1

試す：

$(".msg-list").on('click', function(e) {
    alert("div handler");
    return false;
});
$(".msg-list a").on('click', function(e) {
    alert("a handler");
    e.stopPropagation();
});

これは、あなたの望むことですか？http://jsfiddle.net/L5kC4/2

Answer 2

古い質問。しかし、私は同じ問題を抱えていました。

追加e.preventDefault()すると問題が修正されました。デフォルトでは、リンクをたどります。それで、それが続くのを防ぎます。

<a>また、それをその子の に追加しても問題ありません。

Answer 3

div 内のリンクを有効にするには、この JavaScript を使用します。含まれている要素であるリンクの伝播を無効にする必要があります。

$(".msg-list a").click(function(e) {
    e.stopPropagation();
});
$(".msg-list").on('click', function(e) {
    alert("Handler for .click() called.");
});