event.stopPropagation（）在Javascript中未結束冒泡

Question

我開始學習這種冒泡如何在Javascript中工作。 現在我的問題是，我想我不太了解！ 我正在HTML中運行onclick （看起來像這樣：

onclick="checkboxhit(<?php echo $allmail[$key]["mailid"]; ?>)"

），並且同時運行If和Else語句。 基本上，我只是嘗試檢查“ 何時”和“ 何時不”復選框。 這是我正在使用的Javascript：

listofmailids = [];
function checkboxhit(mailid) {
    if (listofmailids.indexOf(mailid) == -1) {
        listofmailids.push(mailid);
        $("#deletemail").css("color", "#474747");
        event.stopPropagation()
    }
    else {
        listofmailids.splice(listofmailids.indexOf(mailid), 1);
        if (listofmailids.length == -1) {
            $("#deletemail").css("color", "#A3A3A3");
        }
        event.stopPropagation()
    }
}

然而event.stopPropagation()並沒有阻止If和Else語句的執行。 我該如何解決？ 謝謝！

Answer 1

使用onclick ，如果需要event對象，則需要顯式傳遞它

onclick="checkboxhit(<?= json_encode($allmail[$key]['mailid']) ?>, event)"

而在你的職能

function checkboxhit(mailid, e) {
    e.stopPropagation();
    // etc

json_encode()將確保$allmail[$key]['mailid']值可安全用作JavaScript文字。

---

如果要停止傳播並阻止默認操作，則可以使用偽造的返回值，如下所示

onclick="return checkboxhit(...)"

而在你的職能

return false;

Answer 2

只要在到達假返回之前沒有JavaScript運行時錯誤，返回假就足以停止冒泡。

可以通過更可靠的方式來顯式傳遞事件參數：

<a id="test">...</a>
<script>
function checkboxhit(mailid){
  return function(e){
    if (e) e.stopPropagation;
    ...
  }
}
document.getElementById('test').onclick=checkboxhit('123');
</script>

上面的代碼也可以在IE中運行。 選擇的答案將導致錯誤，因為未定義“ e”。

Answer 3

您應該使用事件偵聽器，而不是內聯處理程序。 在這種情況下，會自動添加Event對象。

無論如何，請考慮以下內容-它的行為將完全符合您的預期:)

<div id="outer">
  <button id="test">click me</button>
</div>

然后...

document.getElementById('test').addEventListener('click', function (ev) {
  ev.stopPropagation()
}, false)

document.getElementById('outer').addEventListener('click', function (ev) {
  // never called...
}, false)