如何防止鏈接點擊時的事件傳播？
[英]How do I prevent event propagation on link click?
問題描述
當我點擊我的 a-tag 時，我不希望觸發父級的事件。 如果孩子有一個正常的事件監聽器，它可以被 event.stopPropagation() 阻止，但是當沒有“事件”時我該怎么做？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="parent" style="width:100px; height:100px; background-color: red">
<a id="child" href="https://i.kym-cdn.com/entries/icons/facebook/000/013/564/doge.jpg">Text</a>
</div>
<script>
document.getElementById("parent").addEventListener("click", function () {
alert("Oh no, you clicked me!");
});
</script>
<script src="test.js"></script>
</body>
</html>
4 個解決方案
解決方案1
4 已采納 2018-08-10 14:46:29
方法一
如果孩子有一個正常的事件監聽器，它可以被 event.stopPropagation() 阻止
是的。
但是當沒有“事件”時我該怎么做？
有一個事件。 你只是沒有在聽。
您可以通過偵聽子元素來解決問題：
document.getElementById("parent").addEventListener("click", function() { alert("Oh no, you clicked me!"); }); document.querySelector("a").addEventListener("click", function(e) { e.stopPropagation(); });
<div id="parent" style="width:100px; height:100px; padding: 1em; background-color: #aaa"> <a id="child" href="https://placeimg.com/200/200/nature/sepia">Text</a> </div>
方法二
或者，您可以檢查事件的target ，看看它是否不可接受。
const blacklist = [document.querySelector("a")]; document.getElementById("parent").addEventListener("click", function(e) { if (blacklist.includes(e.target)) { return; } alert("Oh no, you clicked me!"); });
<div id="parent" style="width:100px; height:100px; padding: 1em; background-color: #aaa"> <a id="child" href="https://placeimg.com/200/200/nature/sepia">Text</a> </div>
解決方案2
2 2018-08-10 14:47:58
只需向鏈接添加一個單擊偵聽器，在該鏈接上執行event.stopPropagation(); . 這將防止對子項的點擊冒泡（從而觸發對父項的點擊）。
document.getElementById("parent").addEventListener("click", function() { console.log('parent received click'); }); document.getElementById("child").addEventListener("click", function(e) { e.preventDefault(); // this line prevents changing to the URL of the link href e.stopPropagation(); // this line prevents the link click from bubbling console.log('child clicked'); });
<div id="parent" style="width:100px; height:100px; background-color: red"> <a id="child" href="https://i.kym-cdn.com/entries/icons/facebook/000/013/564/doge.jpg">Text</a> </div> <script> </script>
解決方案3
0 2021-03-18 21:44:03
event對象也可在onclick處理程序中使用：
<a id="child" href="https://i.kym-cdn.com/entries/icons/facebook/000/013/564/doge.jpg"
onclick="event.stopPropagation()">Text</a>
從靈感此。
⚠️ 與Internet Explorer不兼容，但它與Edge兼容（在 v89 上測試）。
解決方案4
-1 2018-08-10 15:24:05
嘗試這個。
document.getElementById(id-here).addEventListener("click", function(e) {
e.stopImmediatePropagation();
console.log("clicked");
});
調用event.stopImmediatePropagation(); 根據我的經驗，會給你預期的結果。
如何防止事件在<button />元素</button>上傳播<button />？</button>
[英]How to prevent event propagation on a <button /> element?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.