events almost always bubble up unless event.cancelBubble=true is set or event.stopPropagation() is used. You are only aware of it, though, when one of your event handlers gets tripped. See http://en.wikipedia.org/wiki/DOM_events for a list of events which bubble. (Note: in the table of HTML events, cancelable refers to the effectiveness of event.preventDefault() or return false to … Read more
I had the same issue. I found stopPropagation did work. I would split the list item into a separate component, as so: class List extends React.Component { handleClick = e => { // do something } render() { return ( <ul onClick={this.handleClick}> <ListItem onClick={this.handleClick}>Item</ListItem> </ul> ) } } class ListItem extends React.Component { handleClick = … Read more
If you want to be able to add this to any elements without having to copy/paste the same code over and over again, you can make a directive to do this. It is as simple as below: import {Directive, HostListener} from “@angular/core”; @Directive({ selector: “[click-stop-propagation]” }) export class ClickStopPropagation { @HostListener(“click”, [“$event”]) public onClick(event: any): … Read more
I am adding this answer for completeness because the accepted answer by @amustill does not correctly solve the problem in Internet Explorer. Please see the comments in my original post for details. In addition, this solution does not require any plugins – only jQuery. In essence, the code works by handling the mousewheel event. Each … Read more
Events bubble to the highest point in the DOM at which a click event has been attached. So in your example, even if you didn’t have any other explicitly clickable elements in the div, every child element of the div would bubble their click event up the DOM to until the DIV’s click event handler … Read more
return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event object. e.preventDefault() will prevent the default event from occuring, e.stopPropagation() will prevent the event from bubbling up and return false will do both. Note that this behaviour differs from normal (non-jQuery) event handlers, … Read more