如何停止div中的onclick事件傳播到文檔？

我想停止這個div的onclick事件傳播到文檔？當用戶點擊「div」時，出現兩種警報：1）div的警報和2）文檔的警報。我想壓制文檔警報。如何停止div中的onclick事件傳播到文檔？

我知道如何使用addEventListener來做到這一點，但還有另一種方法來做到這一點？下面的問題是，我不知道如何查看事件 - 我嘗試了「event = element.onclick」，如下所示，但這不起作用。我如何獲得該活動？

<head> 
<script> 
    function showMenu(element) { 
     alert("div clicked"); 
     event = element.onclick; // HOW TO GET HOLD OF THE EVENT? 
     // Don't propogate the event to the document 
     if (event.stopPropagation) { 
      event.stopPropagation(); // W3C model 
     } else { 
      event.cancelBubble = true; // IE model 
     } 
    } 

    document.onclick = function() { 
     alert('document clicked'); 
    }; 
</script> 
</head> 

<body> 
    <div id="foodmenu" onclick="showMenu(this);">Click inside this div</div> 
    or click outside the div. 
</body>

來源

2010-06-19 dougkramer

改變你的函數定義包括事件：

function showMenu(event, element) { 
    alert("div clicked"); 
    // Don't propogate the event to the document 
    if (event.stopPropagation) { 
     event.stopPropagation(); // W3C model 
    } else { 
     event.cancelBubble = true; // IE model 
    } 
}

然後改變呼叫事件經過：

div id="fooddmenu" onclick="showMenu(event, this);">Click inside this div</div>

來源

2010-06-19 18:17:40

太棒了！我試過你的修復，它的工作原理！非常感謝。後續行動，如果你願意。我花了幾個小時來搜索和閱讀怪癖模式和書籍章節，無法在任何地方找到答案。權威引用在哪裏聲明事件處理程序的第一個參數是事件？（在這裏是「事件」保留關鍵字嗎？） – dougkramer 2010-06-19 18:44:41

它不一定是第一個參數。該順序由HTML中的事件設置確定，例如如果你使用了'onclick =「showMenu（this，event）;那麼第二個參數就是事件數據。 – 2010-06-19 18:52:02

本說什麼:) – 2010-06-19 19:01:54

將onclick添加到body元素。

來源

2010-06-19 18:07:52

嘗試事件偵聽器：

HTML：

<div id="fooddmenu">Click inside this div</div>or click outside the div.

個JS：

function showMenu(e) { 
    alert("div clicked"); 
} 

document.onclick = function() { 
    alert('document clicked'); 
}; 

window.onload = function(){ 
    document.getElementById("fooddmenu").addEventListener("click", function(e){ 
     showMenu(this); 
     e.stopPropagation(); 

    }); 
};

來源

2010-06-19 18:43:46 tcooc

謝謝。這是一個乾淨的選擇。 – dougkramer 2010-06-19 20:17:12

$("div").click(function(){ 
    ... 
    ... 
    ... 

    return false; //this will stop the further propagation of the event 
});

來源

2010-06-20 03:59:29

我看着這個，看起來「返回false」並不會阻止事件的進一步傳播。它只是防止默認操作生效，這是不同的。例如，如果你點擊一個鏈接，「返回false」將阻止瀏覽器關注鏈接，但不會阻止事件冒泡到可以觸發的文檔document.click = function（）{alert（「喜「）;}; – dougkramer 2010-06-23 18:15:57

道格拉斯，它從得到冒泡停止該事件。

檢查了這一點http://jsbin.com/ahoyi/edit

這裏，如果你評論的警告聲明，它會顯示在點擊小框只有一個其他2個警報。

希望這會有所幫助。

來源

2010-06-27 20:23:26

謝謝你給我看。我不清楚美元符號'$'的作用。我嘗試用document.getElementById（「parent」）替換它，但是出現錯誤：「Object＃沒有方法'單擊'」 – dougkramer 2010-06-28 15:38:50

好吧，這是一個jQuery代碼。（「＃」）與document.getElementById（「id」）相同

.click函數與addEvent（「click」，function（）{...}）相同。

所以基本上這兩個函數都有父級和子級DIV的點擊處理程序。

通過評論/取消註釋「返回false」來觀察輸出結果。聲明。

希望有所幫助。

順便說一句，對於那個「$」混淆抱歉。

來源

2010-06-28 19:06:52

如何停止div中的onclick事件傳播到文檔？

回答

相關問題