How to stop event propagation with inline onclick attribute

Question

Consider the following    lt div onclick  alert  you clicked the header    class  header  gt     lt span onclick  alert  you clicked inside the header     gt something inside the header lt  span gt   lt  div gt    How can I make it so that when the user clicks the span  it does not fire the div s click event

User · Answer

Use separate handler  say  function myOnClickHandler th     say let t   th     and in html do this   lt    onclick  quot myOnClickHandler this   event stopPropagation    quot     gt   Or even   function myOnClickHandler e     e stopPropagation       for   lt    onclick  quot myOnClickHandler event  quot     gt

User · Answer

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

User · Answer

Use event stopPropagation      lt span onclick  event stopPropagation    alert  you clicked inside the header     gt something inside the header lt  span gt    For IE  window event cancelBubble   true   lt span onclick  window event cancelBubble   true  alert  you clicked inside the header     gt something inside the header lt  span gt

User · Answer

This worked for me   lt script gt  function cancelBubble e     var evt   e   e window event   if  evt stopPropagation     evt stopPropagation     if  evt cancelBubble  null  evt cancelBubble   true     lt  script gt    lt div onclick  alert  Click     gt     lt div onclick  cancelBubble event   gt Something inside the other div lt  div gt   lt  div gt

User · Answer

For ASP NET web pages  not MVC   you can use Sys UI DomEvent object as wrapper of native event     lt div onclick  event stopPropagation           or  pass event as a parameter to inner function    lt div onclick  someFunction event          and in someFunction   function someFunction event       event stopPropagation       here Sys UI DomEvent stopPropagation   method is used        other onclick logic

User · Answer

For ASP NET web pages  not MVC   you can use Sys UI DomEvent object as wrapper of native event     lt div onclick  event stopPropagation           or  pass event as a parameter to inner function    lt div onclick  someFunction event          and in someFunction   function someFunction event       event stopPropagation       here Sys UI DomEvent stopPropagation   method is used        other onclick logic

User · Answer

This worked for me   lt script gt  function cancelBubble e     var evt   e   e window event   if  evt stopPropagation     evt stopPropagation     if  evt cancelBubble  null  evt cancelBubble   true     lt  script gt    lt div onclick  alert  Click     gt     lt div onclick  cancelBubble event   gt Something inside the other div lt  div gt   lt  div gt

User · Answer

According to this page  in IE you need   event cancelBubble   true

User · Answer

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

User · Answer

According to this page  in IE you need   event cancelBubble   true

User · Answer

This also works - In the link HTML use onclick with return like this     lt a href  mypage html  onclick  return confirmClick     gt Delete lt  a gt    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

User · Answer

Use event stopPropagation      lt span onclick  event stopPropagation    alert  you clicked inside the header     gt something inside the header lt  span gt    For IE  window event cancelBubble   true   lt span onclick  window event cancelBubble   true  alert  you clicked inside the header     gt something inside the header lt  span gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt div onclick   arguments 0     window event  stopPropagation     gt    lt  div gt    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

User · Answer

The best solution would be handle with the event through a javascript function  but in order to use a simple and quick solution using the html element directly  and once that the  event  and  window event  are deprecated and not universally supported  https   developer mozilla org en-US docs Web API Window event   I suggest the following  hard code     lt div onclick  alert  blablabla     arguments 0    arguments 0  stopPropagation     false    gt     lt  div gt

User · Answer

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

User · Answer

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  amp  Other Browsers     if  e stopPropagation          e stopPropagation                IE8 and Lower     else         e cancelBubble   true

User · Answer

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

User · Answer

This also works - In the link HTML use onclick with return like this     lt a href  mypage html  onclick  return confirmClick     gt Delete lt  a gt    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

User · Answer

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  amp  Other Browsers     if  e stopPropagation          e stopPropagation                IE8 and Lower     else         e cancelBubble   true

User · Answer

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  amp  Other Browsers     if  e stopPropagation          e stopPropagation                IE8 and Lower     else         e cancelBubble   true

User · Answer

Use separate handler  say  function myOnClickHandler th     say let t   th     and in html do this   lt    onclick  quot myOnClickHandler this   event stopPropagation    quot     gt   Or even   function myOnClickHandler e     e stopPropagation       for   lt    onclick  quot myOnClickHandler event  quot     gt

User · Answer

lt div onclick  alert  you clicked the header    class  header  gt     lt span onclick  alert  you clicked inside the header    event stopPropagation    gt      something inside the header    lt  span gt   lt  div gt

User · Answer

According to this page  in IE you need   event cancelBubble   true

User · Answer

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

User · Answer

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    lt div onclick   arguments 0     window event  stopPropagation     gt    lt  div gt    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

User · Answer

Use event stopPropagation      lt span onclick  event stopPropagation    alert  you clicked inside the header     gt something inside the header lt  span gt    For IE  window event cancelBubble   true   lt span onclick  window event cancelBubble   true  alert  you clicked inside the header     gt something inside the header lt  span gt

User · Answer

lt div onclick  alert  you clicked the header    class  header  gt     lt span onclick  alert  you clicked inside the header    event stopPropagation    gt      something inside the header    lt  span gt   lt  div gt

User · Answer

The best solution would be handle with the event through a javascript function  but in order to use a simple and quick solution using the html element directly  and once that the  event  and  window event  are deprecated and not universally supported  https   developer mozilla org en-US docs Web API Window event   I suggest the following  hard code     lt div onclick  alert  blablabla     arguments 0    arguments 0  stopPropagation     false    gt     lt  div gt

User · Answer

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  amp  Other Browsers     if  e stopPropagation          e stopPropagation                IE8 and Lower     else         e cancelBubble   true

User · Answer

Use event stopPropagation      lt span onclick  event stopPropagation    alert  you clicked inside the header     gt something inside the header lt  span gt    For IE  window event cancelBubble   true   lt span onclick  window event cancelBubble   true  alert  you clicked inside the header     gt something inside the header lt  span gt

User · Answer

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        lt div onclick  myfunc this     gt

User · Answer

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        lt div onclick  myfunc this     gt

User · Answer

According to this page  in IE you need   event cancelBubble   true

[javascript] How to stop event propagation with inline onclick attribute?

Examples related to javascript

Examples related to html

Examples related to events

Examples related to dom