Execute href of an anchor, but not “onclick” of underlying DIV?
Question
See the code/HTML snipped below. I have an anchor with an "href" which is inside a DIV with an "onclick" event handler. If I click the anchor, the browser opens a new tab and the "onclick" gets executed. In case the user clicked the anchor, I want to supress the execution of "onclick". Returning "false" in an onclick of the anchor pevents the href being triggered. What's the solution here?
<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>
René
2 answers
solution1
7 ACCPTED 2010-10-20 15:21:45
Simplest way is to stop the propagation (bubbling) of the onclick event from the anchor tag to the div. Just add an onclick event to the anchor and set the handler to this:
event.cancelBubble = true; if(event.stopPropagation) { event.stopPropagation(); }
This is the cross-browser code. Tested in IE, FF, Chrome, Safari. So your code should look like this now:
<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>
solution2
3 2010-10-20 15:10:10
Give your anchor an ID, and in the DIV's onclick handler, check if the target of the event was your anchor:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.