event.stopPropagation stops propagation of live events, although it should not - javascript

The documentation for says that event.stopPropagation shouldn't stop propagation of live events (http://api.jquery.com/event.stopPropagation). However it works just the opposite for me. Try this: http://jsfiddle.net/PSYg8. Clicking on the red Div should fire the live event attached to the html element.

What the documentation is telling you is that it is not possible to call stopPropagation from a live handler.
Because jQuery implements live events by listening to all events that propagate up to the <html> element and then seeing if the firing element matches your original selector, stopping propagation from a regular event handler on an element prevents the event from ever reaching the live handler.
Edit: If you're not clear on how DOM events and event propagation works, QuirksMode has a wonderful analysis of the capturing and bubbling models, and Microsoft has a great page that lets you visualize how event propagation works in the W3C, classic, and IE models.

You're swapping the items. Inside .live, you cannot use stopPropagation. So for example this does generate two alerts: http://jsfiddle.net/PSYg8/1/.
$(document).ready(function(){
$('html').live('click', function(){
alert('html');
event.stopPropagation();
});
$('div').click(function(event){
alert('div');
});
});
Inside .click (.bind), stopPropagation works seamlessly. It just stops the div event from bubbling up to the html element.

Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events
Meaning
$('html').live('click', function(e){
e.stopPropagation(); // does nothing
alert('html');
});
You misinterpreted the documentation. When you stop propagation on the click event it does not bubble upto the live event.

Related

TransitionEnd listener firing on child elements

I added a transitionend event listener to a div. This div has children who have transition on some elements. I want the transitionend event to only fire for the element I added it for, is this a bug? or expected behavior? How to make it fire only if its the one i added the listener to?
Events are bubbling by default,
meaning that they will be "transmitted" to the parent element until they hit the body or a handler that will stop them.
You can either :
Filter by the event's target being sure it's the element you're targetting.
Listening to the event on children and event.stopPropagation() on them. That way, they won't bubble through the parent anymore.
If you'd show us some code, it would be easier to help you, depending on your current implementation.
This process is called as Event Bubbling.The thing you can do is either detect the bubbling using the event handler or prevent the bubbling by stopping the propogation. You can do this by
event.stopPropagation()
In IE beofore 9.
You can do it as
window.event.cancelBubble = true;
Please have a detailed look here

Need to get info from any element, which was clicked, but not from parent elements

Need to get info from any element, which was clicked.
Example:
<div>text1<section>text2</section></div>
and JS
$(function(){
$('body *').click(function(){
alert($(this).get(0).tagName.toLowerCase());
});
});
If I click text2, parent element throw alert too. I need only first alert from section. How I can block next alerts from all parent elements of section.
Use event.stopPropagation() to prevent the event from firing on the containing elements.
$(function(){
$('body *').click(function(e){
e.stopPropagation();
alert($(this).get(0).tagName.toLowerCase());
});
});
Just wanted to expand on Kooilnc answer - Using on with event delegation is another option.
Event delegation would be nice if you have an event listener bound before or after on a node that needs to listen to a click handler that has bubbled up. If you stopPropagation, this obviously would be an issue.
Here's a fiddle with a demo:
http://jsfiddle.net/ahgtLjbn/
Let's say a buddy of yours has bound an event listener to a node higher up in the DOM tree. He expects any events that bubble up to it, to be handled by his script.
Using event delegation, the event still bubbles up (so your buddies code will still fire), but it will only alert once (since we called e.stopPropagation).
Calling on without event delegation, or binding the event directly using click (which, under the hood, is just calling on) will prevent the event from bubbling, so your buddies code will never run.

ReactJS SyntheticEvent stopPropagation() only works with React events?

I'm trying to use event.stopPropagation() within a ReactJS component to stop a click event from bubbling up and triggering a click event that was attached with JQuery in legacy code, but it seems like React's stopPropagation() only stops propagation to events also attached in React, and JQuery's stopPropagation() doesn't stop propagation to events attached with React.
Is there any way to make stopPropagation() work across these events? I wrote a simple JSFiddle to demonstrate these behaviors:
/** #jsx React.DOM */
var Propagation = React.createClass({
alert: function(){
alert('React Alert');
},
stopPropagation: function(e){
e.stopPropagation();
},
render: function(){
return (
<div>
<div onClick={this.alert}>
<a href="#" onClick={this.stopPropagation}>React Stop Propagation on React Event</a>
</div>
<div className="alert">
<a href="#" onClick={this.stopPropagation}>React Stop Propagation on JQuery Event</a>
</div>
<div onClick={this.alert}>
JQuery Stop Propagation on React Event
</div>
<div className="alert">
JQuery Stop Propagation on JQuery Event
</div>
</div>
);
}
});
React.renderComponent(<Propagation />, document.body);
$(function(){
$(document).on('click', '.alert', function(e){
alert('Jquery Alert');
});
$(document).on('click', '.stop-propagation', function(e){
e.stopPropagation();
});
});
React uses event delegation with a single event listener on document for events that bubble, like 'click' in this example, which means stopping propagation is not possible; the real event has already propagated by the time you interact with it in React. stopPropagation on React's synthetic event is possible because React handles propagation of synthetic events internally.
Working JSFiddle with the fixes from below.
React Stop Propagation on jQuery Event
Use Event.stopImmediatePropagation to prevent your other (jQuery in this case) listeners on the root from being called. It is supported in IE9+ and modern browsers.
stopPropagation: function(e){
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
},
Caveat: Listeners are called in the order in which they are bound. React must be initialized before other code (jQuery here) for this to work.
jQuery Stop Propagation on React Event
Your jQuery code uses event delegation as well, which means calling stopPropagation in the handler is not stopping anything; the event has already propagated to document, and React's listener will be triggered.
// Listener bound to `document`, event delegation
$(document).on('click', '.stop-propagation', function(e){
e.stopPropagation();
});
To prevent propagation beyond the element, the listener must be bound to the element itself:
// Listener bound to `.stop-propagation`, no delegation
$('.stop-propagation').on('click', function(e){
e.stopPropagation();
});
Edit (2016/01/14): Clarified that delegation is necessarily only used for events that bubble. For more details on event handling, React's source has descriptive comments: ReactBrowserEventEmitter.js.
It is still one intersting moment:
ev.preventDefault()
ev.stopPropagation();
ev.nativeEvent.stopImmediatePropagation();
Use this construction, if your function is wrapped by tag
Worth noting (from this issue) that if you're attaching events to document, e.stopPropagation() isn't going to help. As a workaround, you can use window.addEventListener() instead of document.addEventListener, then event.stopPropagation() will stop event from propagating to the window.
From the React documentation:
The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append Capture. (emphasis added)
If you have a click event listener in your React code and you don't want it to bubble up, I think what you want to do is use onClickCapture instead of onClick. Then you would pass the event to the handler and do event.nativeEvent.stopPropagation() to keep the native event from bubbling up to a vanilla JS event listener (or anything that's not react).
I was able to resolve this by adding the following to my component:
componentDidMount() {
ReactDOM.findDOMNode(this).addEventListener('click', (event) => {
event.stopPropagation();
}, false);
}
React 17 delegates events to root instead of document, which might solve the problem.
More details here.
You can also refer to my blog.
I ran into this problem yesterday, so I created a React-friendly solution.
Check out react-native-listener. It's working very well so far. Feedback appreciated.
A quick workaround is using window.addEventListener instead of document.addEventListener.
Update: You can now <Elem onClick={ proxy => proxy.stopPropagation() } />
The way i've solved this is by adding an if statement at the callback that check the event.target and if its diferent to the element i expect, then return from the function
// Callback from my own app
function exitResultsScreen(event){
// Check element by ID
if (event.target.className !== sass.div__search_screen){return}
// Executed only when the right elements calls
setShowResults(false)
}
In my case e.stopPropagation() didn't work because child had onChange event, parent onClick. Got insight from another StackOverflow answer
The change and click events are different events.
Meagning:
e.stopPropagation() calling inside onChange won't prevent firing onClick.
Solution to have both onChange or onClick.

Direct vs delegation and bubbling vs capturing in jQuery

HTML
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
jQuery
$('div span').on('click', function(){
//direct - 1st method
});
$('div').on('click','span', function(){
//delegation - 2nd method
});
I have used both above method in my code. I know second method is better due to it has only got single handler. My problems are:
Is first method (direct) refers to the concept called event capturing? Is it an example for event capturing?
Is second method (delegation) refers to the concept called event bubbling? Is it an example for event bubbling?
It appears as though All jQuery event methods use Event Bubbling, not Event Capturing.
Therefore, both of your examples will use Event Bubbling.
There is an edge case with focus and blur events not bubbling in some browsers. In the affected browsers, Event Capturing is used for focus and blur events.
For reference, you can simply view the source. http://code.jquery.com/jquery.js
$('div span').on('click', function(){
//direct - 1st method
});
This event only attached the event handler to the spans inside Div that are currently present in the DOM.. i.e; if a new span element is added to the div , that span will not have a click event associated with it..
The first and second one are example's of Event Bubbling
There comes the concept of Event delegation where in the ancestor is given the event handler and it is delegated to the children..
The second example is an example of event delegation .
Wherein event is attached to the parent element..So all the span element's inside the div class are attached to the event handler ..
So if a new span element is added to the div , becoz the event is associated with the span's ancestor the event will fire in this case
This helps in cases
$('div').on('click','span', function(){
//delegation - 2nd method
});
I have no idea where event capturing is used in the jQuery library
Answers to your questions:
This isn't bubbling, capturing, or delegating. It's just adding an event listener directly to an element.
Yep, this is delegation that under the hood relies on clicks bubbling up.
Event bubbling and capturing are different implementations of the same concept, brought to you by Microsoft and Netscape, respectively. Both listening for events on parent elements. Note that they occur in a different order: capturing happens from the parent down to descendent, whereas bubbling happens the other way around.
More details and its history on PPK's website: http://www.quirksmode.org/js/events_order.html
Modern browsers support both capture and bubbling (bubbling is the default now), and you can specify which one you want to use when you use the native addEventListener:
element.addEventListener('click', function(){}, false); // bubble
element.addEventListener('click', function(){}, true); // capture
However, some events, such as focus, blur, scroll, mouseover, etc only are supported through capture phase events, so you MUST specify "true" when you use addEventListener.
Unfortunately, it looks like jQuery doesn't support delegation for all capture phase events, only focus and blur (see https://github.com/jquery/jquery/blob/ad032d3c7df04827989a4187117614c29bf3a4ad/src/event.js#L728).
The short answer: for delegation of capture-phase events other than focus and blur, you need to use the native addEventListener, not jQuery.

jQuery StopPropagation issue

I want to close the div if someone clicked outside that div. I have the below code:
$('body').click(function(e) {
$('div.test').slideUp('slow');
});
$('div.test').live('click',function(e) {
e.stopPropagation();
});
But the issue is that when someone click inside the div, the div itself is closing. I want to prevent that. After debugging I found a weird stuff the debugger is hitting the $(body).click first instead of $(div.test), May I know the reason for this? Can you help me in fixing the issue?
The problem is with your use of live.
live is a way of saying "bind a handler to the root element and capture any events that originated on an element matching a selector". It's a short form of delegate. This is possible because of "bubbling": events on elements are triggered on the element's ancestors as well.
If you do not specify otherwise, live binds the event handler to the document. The event handler on the body will be triggered first since the event won't have bubbled up to the document handler, where the e.stopPropagation() is.
The easiest solution would be to change live to click:
$('div.test').click(function(e) {
If you need to use live, introduce a container element, and handle the event there. I'll use delegate as I prefer its syntax, but you could use live if you preferred:
$('#container').delegate('div.test', 'click', function(e) {
e.stopPropagation();
});
The event is handled on #container and propagation is stopped, so the event never reaches the body's event handler.
What happens if you handle the body click with live() too?
I believe the live click handler doesn't propagate the event in the same way as a standard click. See this documentation.
I believe the problem arises because you are setting a click handler to <body>
I tried the same thing with <p> instead of <body> and it seems to work fine.
Here's a relevant fiddle:
http://jsfiddle.net/seNXV/7/
live() does not stop propagation. Says do in the jQuery docs.
You need to use delegate()

Categories