Questions tagged [event-bubbling]

The concept of parent elements handling events that are propagated by a child element

In event bubbling, an event is propagated through the ancestors of the element that initially receives the event.

For example:

<div id='main' onclick='mainCode();'>
<div id='kid1' onclick='myVar=1;'></div>
<div id='kid2' onclick='myVar=2;'></div>
</div>

The click event bubbles, and so is propagated to the main <div> element after being handled by a kid <div> element.

This can make code simpler to understand, for example if mainCode() has access to the myVar variable, determining which kid sent the message is easy.

References

567 questions
1237
votes
11 answers

What is event bubbling and capturing?

What is the difference between event bubbling and capturing? When should one use bubbling vs capturing?
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
238
votes
32 answers

Prevent scrolling of parent element when inner element scroll position reaches top/bottom?

I have a little "floating tool box" - a div with position:fixed; overflow:auto. Works just fine. But when scrolling inside that box (with the mouse wheel) and reaching the bottom OR top, the parent element "takes over" the "scroll request" : The…
T4NK3R
  • 4,245
  • 3
  • 23
  • 25
170
votes
6 answers

Direct vs. Delegated - jQuery .on()

I am trying to understand this particular difference between the direct and delegated event handlers using the jQuery .on() method. Specifically, the last sentence in this paragraph: When a selector is provided, the event handler is referred to as…
moey
  • 10,587
  • 25
  • 68
  • 112
132
votes
20 answers

How to unbind a listener that is calling event.preventDefault() (using jQuery)?

jquery toggle calls preventDefault() by default, so the defaults don't work. you can't click a checkbox, you cant click a link etc etc is it possible to restore the default handler?
user188049
124
votes
21 answers

How do I hide an element on a click event anywhere outside of the element?

I would like to know whether this is the correct way of hiding visible elements when clicked anywhere on the page. $(document).click(function (event) { $('#myDIV:visible').hide(); }); The element (div, span, etc.) shouldn't…
Franek
  • 2,025
  • 3
  • 20
  • 20
83
votes
5 answers

Prevent event bubbling in Vue

So I have this issue in Vue where I don't want do_X to trigger when I click on the button, although its a part of the largeArea.
eozzy
  • 66,048
  • 104
  • 272
  • 428
67
votes
8 answers

Bubbling scroll events from a ListView to its parent

In my WPF application I have a ListView whose ScrollViewer.VerticalScrollBarVisibility is set to Disabled. It is contained within a ScrollViewer. When I attempt to use the mouse wheel over the ListView, the outer ScrollViewer does not scroll because…
sourcenouveau
  • 29,356
  • 35
  • 146
  • 243
60
votes
1 answer

Example for Bubbling and Capturing in React.js

I am looking for an example in handling Bubbling and Capturing in React.js. I found one with JavaScript, but I am having trouble finding the equivalent for React.js. How would I have to create an example for Bubbling and Capturing in React.js?
Socrates
  • 8,724
  • 25
  • 66
  • 113
43
votes
10 answers

Javascript with jQuery: Click and double click on same element, different effect, one disables the other

I have an interesting situation - I have a table row which, currently, shows it's hidden counterpart when I click the "Expand" button. The original (unhidden) row which contains the expand button also has some content in a certain cell which, when…
Swader
  • 11,387
  • 14
  • 50
  • 84
42
votes
5 answers

HTML DOM: Which events do not bubble?

Most events bubble in all browsers. However, I know that in Internet Explorer "submit" events do not bubble. What are the other events that do not bubble?
jeremysawesome
  • 7,033
  • 5
  • 33
  • 37
40
votes
5 answers

Capturing and Bubbling using jQuery

I am new to jQuery and I‘m trying to understand the concept of capturing and bubbling. I have read a lot of articles, but most of them described event propagation for Javascript. Lets assume we have the following HTML code:
christostsang
  • 1,701
  • 3
  • 27
  • 46
36
votes
3 answers

Typescript 3 Angular 7 StopPropagation and PreventDefault not working

I have a text input inside a div. Clicking on the input should set it to focus and stop the bubbling of the div click event. I've tried the stopPropagation and preventDefault on the text input event but to no avail. The console logs shows that the…
user1019042
  • 2,428
  • 9
  • 43
  • 85
35
votes
5 answers

How to stop events bubbling in jQuery?

How do I stop custom event bubbling in jQuery? For example I have this code: $('.myclass').bind('amodaldestroy', function(){ ....does something..... }) How do I only allow this to be triggered once on the first element it finds when bubbling?…
Stann
  • 13,518
  • 19
  • 65
  • 73
30
votes
2 answers

jQuery stopPropagation bubble down

I have a div with a link inside of it:
Lol
Clicking the
atp
  • 30,132
  • 47
  • 125
  • 187
26
votes
6 answers

Is bubbling available for image load events?

Can I use: window.addEventListner(); in some way. All my images have a display = 'none'. Once the image has loaded, I want to set display = 'inline' This way I can normalize what is displayed while the image is being downloaded. In this case, I can…
user1637281
1
2 3
37 38