ansaurus

Question

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

Answer 1

A:

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>

casablanca 2010-10-20 15:10:10

Answer 2

A:

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>

InvisibleBacon 2010-10-20 15:21:45

If you are using jquery, version 1.4.3 now supports .bind("click",false) which will prevents default action and stops event bubbling).

Richard 2010-10-20 15:32:38

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 2010-10-20 15:41:34

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 2010-10-21 09:43:29

(btw: I agree on jQuery, but I like to know how things work under the hood).

Krumelur 2010-10-21 09:43:53

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 2010-10-22 15:28:36

ansaurus

tags:

views:

answers:

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

related questions