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é

Possible duplicate of http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute. — Frédéric Hamidi, Oct 20 '10 at 15:05

score 7 · Accepted Answer · answered Oct 20 '10 at 15:21

7

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>

answered Oct 20 '10 at 15:21

InvisibleBacon

3,137
26
27

If you are using jquery, version 1.4.3 now supports .bind("click",false) which will prevents default action and stops event bubbling). – Richard Oct 20 '10 at 15:32
Yeah jquery makes this kind of thing much easier. I was just giving the raw javascript solution. But really, the author should look into a javascript library like jquery for this kind of thing. Should make these kind's of simple actions easier to manage. – InvisibleBacon Oct 20 '10 at 15:41
How can that solution be cross-browser compatible? IE is passing the event as a parameter, FF is using window.event. Your solution uses "event", which is equal to window.event. Puzzled. – Krumelur Oct 21 '10 at 09:43
(btw: I agree on jQuery, but I like to know how things work under the hood). – Krumelur Oct 21 '10 at 09:43
I'm interested myself.. I tested this in IE 8 and it worked fine. I can't find any documentation on it, but I seem to remember that the "event" var is defined for inline event handlers in both Firefox and IE. I know that if you define an event handler using the usual myAnchor.onclick = function(e)... that e will be undefined in IE. – InvisibleBacon Oct 22 '10 at 15:28
So you're saying if I have any inline event, I can use a magically existing variable named "event" like in 'onmousedown="MyHandler(event);"' and pass that to my handler? It's so hard to believe but I see it working in IE and FF. – Krumelur Nov 25 '10 at 22:15

score 3 · Answer 2 · answered Oct 20 '10 at 15: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>

Execute href of an anchor, but not "onclick" of underlying DIV?

2 Answers2

Linked