stopPropagation 不適用於嵌套的 href 標簽

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

與任何其他事件一樣，單擊事件使用冒泡 ( http://en.wikipedia.org/wiki/DOM_events ) 分派給元素，因此單擊的任何內部元素都將觸發所有父元素（另一種方式稱為隧道）。

您必須將 stopPropagation 放在錨元素 onclick 事件上或放入元素：

onclick="return false;"

Answer 3

要啟用 div 內的鏈接，請使用此 JavaScript。 您必須在包含的元素（鏈接）上禁用傳播！

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

Answer 4

老問題。 但是，我遇到了同樣的問題。

添加e.preventDefault()解決了這個問題。 默認是跟隨鏈接。 所以，防止它跟隨。

此外，將其添加到其子項的<a>也沒有問題。