執行錨點的href，但不是底層DIV的「onclick」？

請參閱下面的代碼/ HTML。我有一個帶有「onclick」事件處理程序的DIV內部的「href」的錨點。如果我點擊錨點，瀏覽器會打開一個新選項卡並執行「onclick」。如果用戶點擊了錨點，我想抑制「onclick」的執行。在錨點的onclick中返回「false」會啓動href。這裏有什麼解決方案？執行錨點的href，但不是底層DIV的「onclick」？

<html> 
<head> 
<script> 
function clicky() 
{ 
alert("Click!"); 
} 
</script> 
</head> 
<body> 
<div id="adiv" onclick="clicky()" style="border:1px solid black;background-color:red;width:400px;height:300px;"> 
<a href="http://www.gohere.but.dont.execute.onclick.com" target="_blank">a link</a> 
</div> 
</body> 
</html>

勒

來源

2010-10-20 Krumelur

http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute的可能的複製。 – 2010-10-20 15:05:29

最簡單的方法是停止傳播（冒泡）從錨標記到div的onclick事件。只需將一個onclick事件添加到錨點並將處理程序設置爲：

event.cancelBubble = true; if(event.stopPropagation) { event.stopPropagation(); }

這是跨瀏覽器的代碼。測試IE，FF，Chrome，Safari。所以，你的代碼看起來應該是現在這個樣子：

<html> 
<head> 
<script> 
function clicky() 
{ 
alert("Click!"); 
} 
</script> 
</head> 
<body> 
<div id="adiv" onclick="clicky()" style="border:1px solid black;background-color:red;width:400px;height:300px;"> 
<a href="http://www.gohere.but.dont.execute.onclick.com" target="_blank" onclick="event.cancelBubble = true; if(event.stopPropagation) { event.stopPropagation(); }">a link</a> 
</div> 
</body> 
</html>

來源

2010-10-20 15:21:45 InvisibleBacon

如果您使用的是jQuery，版本1.4.3現在支持.bind（「click」，false），這將防止默認操作並停止事件冒泡）。 – Richard 2010-10-20 15:32:38

是的，jquery使這種事情更容易。我只是給原始的JavaScript解決方案。但是真的，作者應該研究一個像jquery這樣的JavaScript庫。應該讓這些簡單的操作更容易管理。 – InvisibleBacon 2010-10-20 15:41:34

該解決方案如何跨瀏覽器兼容？ IE將事件作爲參數傳遞，FF使用window.event。您的解決方案使用「event」，它等於window.event。困惑。 – Krumelur 2010-10-21 09:43:29

給你的錨的ID，並在DIV的onclick處理程序，檢查事件的目標是你的錨：

<div id="adiv" onclick="clicky(event)" style="border:1px solid black;background-color:red;width:400px;height:300px;"> 
<a id="link" href="http://www.gohere.but.dont.execute.onclick.com" target="_blank">a link</a> 

<script> 
function clicky(event) { 
    event = event || window.event; 
    var target = event.target || event.srcElement; 
    if (target == document.getElementById('link')) 
    return true; 
    alert("Click!"); 
} 
</script>

來源

2010-10-20 15:10:10 casablanca

非常有用的代碼:)我喜歡純粹的JS方法。 – 2013-06-07 07:37:56

執行錨點的href，但不是底層DIV的「onclick」？

回答

相關問題