Stack Overflow
Stack Overflow

Questions tagged [event-propagation]

Event propagation, or "bubbling", occurs when an event occurs inside an element, which is stacked in other elements.

Event propagation, or "bubbling", occurs when an event occurs inside an element, which is stacked in other elements. In this case the event is being dispatched from the innermost element towards the outermost element. Event propagation can be stopped programmatically, even though it might cause unexpected results.

236 questions
3228
votes
14 answers

event.preventDefault() vs. return false

When I want to prevent other event handlers from executing after a certain event is fired, I can use one of two techniques. I'll use jQuery in the examples, but this applies to plain-JS as well: 1. event.preventDefault() $('a').click(function (e) { …
RaYell
  • 69,610
  • 20
  • 126
  • 152
503
votes
25 answers

How do I prevent a parent's onclick event from firing when a child anchor is clicked?

I'm currently using jQuery to make a div clickable and in this div I also have anchors. The problem I'm running into is that when I click on an anchor both click events are firing (for the div and the anchor). How do I prevent the div's onclick…
Jonathon Watney
  • 20,248
  • 9
  • 38
  • 40
359
votes
15 answers

Stop mouse event propagation

What is the easiest way to stop mouse events propagation in Angular ? Should I pass special $event object and call stopPropagation() myself or there is some other way. For example in Meteor, I can simply return false from event handler.
Roman Kolesnikov
  • 11,777
  • 11
  • 44
  • 67
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
218
votes
10 answers

How can I prevent event bubbling in nested React components on click?

Here's a basic component. Both the
    and
  • have onClick functions. I want only the onClick on the
  • to fire, not the
      . How can I achieve this? I've played around with e.preventDefault(), e.stopPropagation(), to no avail. class List…
dmwong2268
  • 3,315
  • 3
  • 19
  • 20
86
votes
8 answers

How to continue event propagation after cancelling?

When a user clicks a certain link I would like to present them with a confirmation dialog. If they click "Yes" I would like to continue the original navigation. One catch: my confirmation dialog is implemented by returning a jQuery.Deferred object…
George Mauer
  • 117,483
  • 131
  • 382
  • 612
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
51
votes
13 answers

Close Bootstrap Dropdown after link click

I have a bootstrap dropdown menu below. It has a link in it hooked up to a knockout.js binding, that returns false because I don't want the # tag to be sent to the browser URL. However, doing this doesn't close the dropdown menu when I click the…
Mike Flynn
  • 22,342
  • 54
  • 182
  • 341
23
votes
4 answers

Does stopPropgation stop the event from propagating in the capture phase?

I was looking at http://www.quirksmode.org/js/events_order.html and it is ambiguous in this part: In the Microsoft model you must set the event’s cancelBubble property to true. window.event.cancelBubble = true In the W3C model you must call the…
yic
  • 700
  • 1
  • 6
  • 13
21
votes
7 answers

.preventDefault() not working in on.('input', function{})

I would like to limit number of chars in my editable div to 10. After user reach the limit I would like to use .preventDefault() method to protect the div from additional chars. Can you help me out,…
Da Artagnan
  • 1,109
  • 3
  • 17
  • 26
18
votes
1 answer

Real world example where event capturing is necessary / preferred?

The addEventListener DOM method supports a third optional, boolean parameter (useCapture) to indicate whether the function should use event bubbling or event capturing as propagation method. In this article the difference is nicely shown (click on…
webketje
  • 10,376
  • 3
  • 25
  • 54
17
votes
2 answers

Google Map's Double Click Event Propagation

This question is asked often, but never really answered well. Let's see if we can remedy it! Event Propagation Google allows you to bind to events in a Google Map View via their API using event handlers. Sometimes you may bind your event handler…
Morrowind789
  • 551
  • 3
  • 7
  • 18
15
votes
1 answer

Javascript : How to enable stopPropagation?

With object.stopPropagation() I can stop event bubbling but how can I re-enable it? Is there a pre defined function in js something like object.startPropagation? EDIT: The Problem is that the JS remembers if you click on the "object" than stop Event…
Adam Halasz
  • 57,421
  • 66
  • 149
  • 213
13
votes
2 answers

Event propagation in Javascript

If I have an element (html) nested in another element and both of them have a click handler attached, clicking the inner element executes its click handler and then bubbles up to the parent and executes its click handler. That's how I understand…
user76071
11
votes
3 answers

Propagate custom QEvent to parent widget in Qt/PyQt

Fist, apologies for the length of the question. I am trying to propagate custom Qt event from child widgets to a top parent widget in order to trigger some action based on event type instead of linking signals. Qt docs suggests that every event…
Davor Lucic
  • 28,970
  • 8
  • 66
  • 76
1
2 3
…
15 16