By Sam


2008-12-22 23:17:16 8 Comments

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?

12 comments

@user3611941 2019-10-23 04:50:37

I cannot comment because of Karma so I write this as whole answer: According to the answer of Gareth (var e = arguments[0] || window.event; [...]) I used this oneliner inline on the onclick for a fast hack:

<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>

I know it's late but I wanted to let you know that this works in one line. The braces return an event which has the stopPropagation-function attached in both cases, so I tried to encapsulate them in braces like in an if and....it works. :)

@Matías Contreras Selman 2014-08-13 15:01:01

This worked for me

<script>
function cancelBubble(e) {
 var evt = e ? e:window.event;
 if (evt.stopPropagation)    evt.stopPropagation();
 if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
</script>

<div onclick="alert('Click!')">
  <div onclick="cancelBubble(event)">Something inside the other div</div>
</div>

@Nicole 2018-11-21 11:51:26

Are 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... ?!

@James 2008-12-22 23:22:52

Use event.stopPropagation().

<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>

@Robert C. Barth 2008-12-23 00:07:24

There's no such thing as the event object in FireFox.

@Vincent Robert 2008-12-23 00:22:56

The 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 2010-12-09 16:22:14

This is just wrong - inline onclick handlers don't get the event passed as an argument. Correct solution is Gareths, below.

@Morgan Cheng 2011-05-19 08:37:19

In Firefox, you can have access to a variable event in inline script, but window.event is not available. <div onclick="alert(event);"></div>

@Yuval A. 2015-02-02 23:24:36

event seems to be available in inline events in IOS Safari as well.

@TechNyquist 2016-12-01 08:53:14

Maybe you confused with the function provided by jQuery?

@Leon 2019-07-03 13:39:08

it seems, you muse use event.stopPropagation(). if you change event to any other parameter name, such as e, it can not work. Does anyone known why?

@cs01 2016-10-31 18:38:51

Why not just check which element was clicked? If you click on something, window.event.target is assigned to the element which was clicked, and the clicked element can also be passed as an argument.

If the target and element aren't equal, it was an event that propagated up.

function myfunc(el){
  if (window.event.target === el){
      // perform action
  }
}
<div onclick="myfunc(this)" />

@Simon Mattes 2017-04-25 21:14:44

Thanks 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.

@commonpike 2016-01-03 22:04:35

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header'); event.stopPropagation()">
    something inside the header
  </span>
</div>

@ajh1138 2008-12-22 23:28:31

According to this page, in IE you need:

event.cancelBubble = true

@Gareth 2008-12-23 00:20:54

There are two ways to get the event object from inside a function:

  1. The first argument, in a W3C-compliant browser (Chrome, Firefox, Safari, IE9+)
  2. 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.

@RobG 2014-12-25 23:30:36

From an inline listener, you can pass the event object like: onclick="foo(event)", then in the function function foo(event){/* do stuff with event */}. This works in both IE and W3C event models.

@TechNyquist 2016-12-01 08:39:48

That "lesser or equal to eight" is somewhat...ambiguous.

@jcomeau_ictx 2017-06-19 06:08:43

this doesn't actually answer the question.

@Arel 2018-10-28 18:29:42

neat answer to a different question. :-/

@Evgeny Gorb 2013-06-30 22:00:40

For ASP.NET web pages (not MVC), you can use Sys.UI.DomEvent object as wrapper of native event.

<div onclick="event.stopPropagation();" ...

or, pass event as a parameter to inner function:

<div onclick="someFunction(event);" ...

and in someFunction:

function someFunction(event){
    event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
    // other onclick logic
}

@Rajendra 2013-06-06 15:36:56

This also works - In the link HTML use onclick with return like this :

<a href="mypage.html" onclick="return confirmClick();">Delete</a>

And then the comfirmClick() function should be like:

function confirmClick() {
    if(confirm("Do you really want to delete this task?")) {
        return true;
    } else {
        return false;
    }
};

@jzonthemtn 2013-09-26 16:53:20

This is not what the question meant.

@gion_13 2013-10-02 11:29:49

@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 2013-10-03 12:13:15

@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 2013-10-03 14:51:05

The confirm isn't relevant. I am referring to the return value. quote: In the link HTML use onclick with return like this

@commonpike 2016-01-03 22:03:34

returning false cancels following the link, it doesnt cancel the propagation on my chrome

@MSC 2012-05-25 09:58:10

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;"

@X-Blaster 2013-01-09 14:58:39

inline JS in this case is completely unreadable :(

@DannyC 2015-07-17 15:31:57

Thanks @MSC exactly what I needed!

@Cesar 2017-07-18 21:47:34

Inline script. It does answer the question

@Robert C. Barth 2008-12-23 00:06:03

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;
    }
}

@DarkDust 2010-12-22 14:35:39

And to make it work, one needs to call this like this: <div onclick="myEventHandler(event);">

@Pointy 2011-06-22 21:49:25

It could be "event || window.event".

@Guillaume86 2011-10-06 12:33:49

if (e.cancelBubble) don't looks right to me, you set it to true if it's already true

@mauretto 2012-03-30 09:38:04

e.cancelBubble returns false in IE! It can't reach the e.cancelBubble = true; instruction. Use SoftwareARM's condition instead!!

@SoftwareARM 2011-02-24 17:28:13

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;
   }
}

@Saksham 2015-08-04 08:35:47

worked perfectly fine. just what i needed

Related Questions

Sponsored Content

25 Answered Questions

[SOLVED] Show or hide element in React

  • 2014-07-01 05:17:00
  • user1725382
  • 518134 View
  • 460 Score
  • 25 Answer
  • Tags:   javascript reactjs

27 Answered Questions

[SOLVED] Trigger a button click with JavaScript on the Enter key in a text box

30 Answered Questions

[SOLVED] How to create an HTML button that acts like a link?

28 Answered Questions

[SOLVED] React js onClick can't pass value to method

  • 2015-04-22 23:40:14
  • user1924375
  • 459951 View
  • 567 Score
  • 28 Answer
  • Tags:   javascript reactjs

18 Answered Questions

10 Answered Questions

[SOLVED] How to have click event ONLY fire on parent DIV, not children?

  • 2012-02-07 20:29:50
  • CaptSaltyJack
  • 188383 View
  • 188 Score
  • 10 Answer
  • Tags:   jquery events onclick

18 Answered Questions

17 Answered Questions

[SOLVED] How to decide when to use Node.js?

16 Answered Questions

[SOLVED] Change the selected value of a drop-down list with jQuery

Sponsored Content