Suppose I need to write an onclick handler in an attribute, like this:
<a href='#' onclick='DoSomething(); event.stopPropagation(); return false;'>
...</a>
I know this is bad form, but suppose for the moment that I have to use an attribute.
Unfortunately event is not defined. I tried e and that is not defined either. Is there any way to access the event object inside the attribute, or any other way to stop the event propagation?
Where you get the event object depends on the browser. Some (all?) IE versions put it in window.event but everyone else passes it as an argument. So, you end up having to do a silly little dance like this:
function DoSomething(event) {
event = event || window.event;
event.stopPropagation();
// Do useful work.
return false;
}
And then set up the onclick like this:
<a href="javascript:void(0)" onclick="DoSomething(event)">
I also switch to javascript:void(0) so you don't have the usual "# interpreted as an in-page fragment" problems.
var event = ....
I believe you need to pass it into the function itself, like so:
<a href='#' onclick='DoSomething(event); return false;'>...</a>
function DoSomething(event){
event.stopPropagation();
}
event reference from in the first place? And if you do have it, why can't you use it in the onclick attribute directly?
<a href="#" onclick="console.log(event);">pancakes</a>. There's no need for the function. If you have a reference to event, you can use it anywhere. Not just in a function.Depending on browser, event creating and handling is handled differently.
IE creates the global event object when the click happens. FF doesn't create the global event object but passes it to the function as the first argument.
But in your case, simply saying return false will cancel the link action (if that's what you intend to do).
<a href='#' onclick='DoSomething(); return false;'> ...</a>
window.event thing is an old IE-ism. Not my downvote though.return false does not cancel the bubbling, it only cancels the link’s click action (to follow the link).