禁用href的點擊傳播

Question

此代碼段解釋了我的情況：

 $("#b").click(function(e) { e.stopPropagation(); }); $("#b").click(function() { alert("trigger div"); }); 

 a { display: block; position: relative; width: 100px; height: 100px; background-color: gray; } div { position: absolute; width: 50px; height: 50px; top: 0; left: 0; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="stackoverflow.com" id="a"> <div id="b">Test</div> </a> 

問題是我只想從div觸發click函數，而不是從a標記觸發href 。 在類似的問題中，我找到了event.stopPropagation() ，但是在這種情況下不起作用。

Answer 1

您需要使用event.preventDefault()方法阻止默認的單擊事件操作。

 $("#b").click(function(e) { e.preventDefault(); alert("trigger div"); }); 

 a { display: block; position: relative; width: 100px; height: 100px; background-color: gray; } div { position: absolute; width: 50px; height: 50px; top: 0; left: 0; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="stackoverflow.com" id="a"> <div id="b">Test</div> </a> 

Answer 2

$("#a").click(function (event) {
    event.preventDefault();
});

$("#b").click(function (event) {
    event.stopPropagation();
    alert("trigger div");
});

Answer 3

沒有javascript：

 #a { display: block; position: absolute; width: 100px; height: 100px; background-color: gray; } div { position: absolute; width: 50px; height: 50px; background-color: red; } 

 <a href="stackoverflow.com" id="a"> <a href="#"><div onclick="alert('trigger div')">test</div></a> </a>