How to stop event propagation with inline onclick attribute?
Solution 1
<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>
For IE: window.event.cancelBubble = true
<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>
Solution 2
There are two ways to get the event object from inside a function:
- The first argument, in a W3C-compliant browser (Chrome, Firefox, Safari, IE9+)
- The window.event object in Internet Explorer (<=8)
If you need to support legacy browsers that don't follow the W3C recommendations, generally inside a function you would use something like the following:
function(e) {
var event = e || window.event;
[...];
}
which would check first one, and then the other and store whichever was found inside the event variable. However in an inline event handler there isn't an e
object to use. In that case you have to take advantage of the arguments
collection which is always available and refers to the complete set of arguments passed to a function:
onclick="var event = arguments[0] || window.event; [...]"
However, generally speaking you should be avoiding inline event handlers if you need to to anything complicated like stopping propagation. Writing your event handlers separately and the attaching them to elements is a much better idea in the medium and long term, both for readability and maintainability.
Solution 3
Keep in mind that window.event is not supported in FireFox, and therefore it must be something along the lines of:
e.cancelBubble = true
Or, you can use the W3C standard for FireFox:
e.stopPropagation();
If you want to get fancy, you can do this:
function myEventHandler(e)
{
if (!e)
e = window.event;
//IE9 & Other Browsers
if (e.stopPropagation) {
e.stopPropagation();
}
//IE8 and Lower
else {
e.cancelBubble = true;
}
}
Solution 4
Use this function, it will test for the existence of the correct method.
function disabledEventPropagation(event)
{
if (event.stopPropagation){
event.stopPropagation();
}
else if(window.event){
window.event.cancelBubble=true;
}
}
Solution 5
I had the same issue - js error box in IE - this works fine in all browsers as far as I can see (event.cancelBubble=true does the job in IE)
onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"
Sam
Updated on February 11, 2021Comments
-
Sam over 3 years
Consider the following:
<div onclick="alert('you clicked the header')" class="header"> <span onclick="alert('you clicked inside the header');">something inside the header</span> </div>
How can I make it so that when the user clicks the span, it does not fire the
div
's click event? -
Robert C. Barth over 15 yearsThere's no such thing as the event object in FireFox.
-
Vincent Robert over 15 yearsThe event object is a parameter of the callback. Actually, there is no such thing as the event object in IE because this object is accessible through window.event instead of being a parameter of the function :-)
-
Benubird over 13 yearsThis is just wrong - inline onclick handlers don't get the event passed as an argument. Correct solution is Gareths, below.
-
DarkDust over 13 yearsAnd to make it work, one needs to call this like this:
<div onclick="myEventHandler(event);">
-
Morgan Cheng about 13 yearsIn Firefox, you can have access to a variable event in inline script, but window.event is not available. <div onclick="alert(event);"></div>
-
Pointy almost 13 yearsIt could be "event || window.event".
-
Guillaume86 over 12 yearsif (e.cancelBubble) don't looks right to me, you set it to true if it's already true
-
mauretto about 12 years
e.cancelBubble
returns false in IE! It can't reach thee.cancelBubble = true;
instruction. Use SoftwareARM's condition instead!! -
jzonthemtn over 10 yearsThis is not what the question meant.
-
gion_13 over 10 years@jbird That's exactly what the question meant. It is a different (older) way to cancel an event from bubbling up the dom tree (it's in the dom api level 1 specs).
-
jzonthemtn over 10 years@gion_13 But the click's action isn't something that the user needs to confirm. In the question, we only want the child's onclick() to fire and not the parent's onclick(). Putting a user prompt in between those is not helpful. I hope you can see this difference.
-
gion_13 over 10 yearsThe
confirm
isn't relevant. I am referring to the return value. quote: In the link HTML use onclick with return like this -
RobG over 9 yearsFrom an inline listener, you can pass the event object like:
onclick="foo(event)"
, then in the functionfunction foo(event){/* do stuff with event */}
. This works in both IE and W3C event models. -
Yuval A. over 9 years
event
seems to be available in inline events in IOS Safari as well. -
DannyC almost 9 yearsThanks @MSC exactly what I needed!
-
commonpike over 8 yearsreturning false cancels following the link, it doesnt cancel the propagation on my chrome
-
TechNyquist over 7 yearsThat "lesser or equal to eight" is somewhat...ambiguous.
-
TechNyquist over 7 yearsMaybe you confused with the function provided by jQuery?
-
Simon Mattes about 7 yearsThanks mate, this seems to be the cleanest solution here. On a side-note you have to consider though, that this only matches when the element clicked is the actual topmost element.
-
jcomeau_ictx almost 7 yearsthis doesn't actually answer the question.
-
Cesar almost 7 yearsInline script. It does answer the question
-
Arel over 5 yearsneat answer to a different question. :-/
-
Nicole over 5 yearsAre you sure that this exact code snippet worked for you? Because it looks like there is a string quoting issue in the onclick handler of the outer div... ?!
-
Leon almost 5 yearsit seems, you muse use
event.stopPropagation()
. if you changeevent
to any other parameter name, such ase
, it can not work. Does anyone known why? -
Dave F about 3 yearsDefault behaviours, such as clicks on links are not prevented by Event.stopPropagation(). Source: MDN Event.stopPropagation()