Question

I’ve tested in a few modern browsers with inconsistent results. I’m sure it has something to do with capturing vs bubbling event support differences. I’ve setup a test environment to replicate the issue here: pastebin and use this service to run a live preview.

The problem is this: Some browsers will ignore the anchor href click event when an ancestor prevents bubbling. It doesn’t make sense because the middle element will fire its event before it bubbles down but the anchor element will not. Why does a javascript click event work but the href event will not?

Here are my results when “click me” is pressed:

Chrome 9.0.597.98: href is ignored + inner and outter is printed

IE 8.0.6001.19019: href works + inner and outter is printed

Firefox 3.6.13: href is ignored + inner and outter is printed

So my ultimate question is: How do I get href to work cross-browser when an ancestor element is preventing event bubble? Any insight would be greatly appreciated.

EDIT:

I would just like to note that the discussion continues in Pointy’s comments and I would also like to thank him for his tremendous help!

Answer 1

The problem is that it’s not

event.returnResult = false;

in IE, it’s:

event.returnValue = false;

The link makes it through in IE because you’re not correctly telling the browser not to take the default action.

If you want the default action to take place, then don’t call “.preventDefault()” and don’t set “returnValue” to false.