執行錨的href，而不執行基礎DIV的“ onclick”？

Question

請參見下面的代碼/ HTML。 我有一個帶有“ href”的錨，該錨位於具有“ onclick”事件處理程序的DIV中。 如果單擊錨點，瀏覽器將打開一個新選項卡，並且將執行“ onclick”。 萬一用戶單擊錨點，我想禁止執行“ onclick”。 在錨點事件的onclick中返回“ false”將觸發href。 這里有什么解決方案？

<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>

雷內

Answer 1

最簡單的方法是停止onclick事件從錨標記到div的傳播（冒泡）。 只需將一個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>

Answer 2

給您的錨點一個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>

執行錨的href，而不執行基礎DIV的“ onclick”？

問題描述

2 個解決方案

解決方案1
7 已采納 2010-10-20 15:21:45

解決方案2
3 2010-10-20 15:10:10

執行錨的href，而不執行基礎DIV的“ onclick”？

問題描述

2 個解決方案

解決方案1 7 已采納 2010-10-20 15:21:45

解決方案2 3 2010-10-20 15:10:10

解決方案1
7 已采納 2010-10-20 15:21:45

解決方案2
3 2010-10-20 15:10:10