停止來自onclick處理程序的事件傳播

我正在處理遺留的Web應用程序，我正在逐漸進行ajaxifying，並且發現需要停止來自內聯onclick處理程序的事件傳播。停止來自onclick處理程序的事件傳播

藉此例如：

<a id="inner" onclick="return handleOnclick();" href="#">Some link</a>

除了onclick處理程序，有聽衆加入addEventListener。我需要在某些情況下onclick處理程序可以停止事件的傳播。我試過event.stopPropagation()，但它似乎沒有工作。這裏有一個的jsfiddle測試：

http://jsfiddle.net/APQk6/985/

任何想法？

來源

2014-03-27 Grodriguez

你必須將事件對象傳遞給事件處理程序。但真正的問題是，stopPropagation不會阻止同一元素上的事件處理程序。 –

嘗試event.preventDefault（）。 http://stackoverflow.com/questions/18971284/event-preventdefault-vs-return-false-no-jquery –

@FelixKling事件對象存在（window.event），你可以在檢查的jsfiddle。回覆。「真正的問題是stopPropagation不能阻止同一元素上的事件處理程序」，你能提供一個參考嗎？ – Grodriguez

發現基於Felix Kling's意見的解決方案：

需要調用event.stopImmediatePropagation()，而不是event.stopPropagation()
需要從內嵌處理器通過實際的事件對象（this question也有用）

這裏是一個有效的解決方案：

http://jsfiddle.net/r95cC/3/

來源

2014-03-27 17:04:56 Grodriguez

哦，我知道jQuery有'stopImmediatePropagation'，但不知道它現在把它變成了DOM規範。涼！雖然我不知道瀏覽器的支持是什麼。 –

好問題。它是DOM級別3規範草案的一部分（http://www.w3.org/TR/DOM-Level-3-Events/#widl-Event-stopImmediatePropagation）。我已經在Desktop Chrome，Desltop Firefox，iPad和iPhone上測試過它。 – Grodriguez

+1這比我的基於屬性的解決方案簡單得多:) – kol

您可以使用「取消」屬性。不好，但工作。 http://jsfiddle.net/koldev/45zbA/

HTML

<script> 
function handleOnclick(self) { 
    self.setAttribute("cancelled", confirm('Stop event?') ? "1" : "0"); 
    return false; 
} 
</script> 

<div> 
    <a id="inner" onclick="return handleOnclick(this);" href="#">Some link</a> 
</div>

的JavaScript

document.getElementById('inner').addEventListener('click', function(e){ 
    if (this.getAttribute("cancelled") == "1") { 
     return; 
    } 
    alert("Listener called"); 
});

來源

2014-03-27 16:40:33 kol

謝謝你的建議，雖然它看起來像'stopImmediatePropagation'是我正在尋找。 – Grodriguez

停止來自onclick處理程序的事件傳播

回答

相關問題