Menu
I have an IconMenu component inside a Paper component.
I would like to prevent the propagation of the click event on the inner component (the IconMenu).
That's what I came up with, without significant results (I also tried substituting onClick with onTouchTap, onMouseUp with same effects): the _iconMenuClick method is never called.
render() {
return (
<Paper onClick={this._onClick}>
<IconMenu iconButtonElement={iconButtonElement} onClick={this._iconMenuClick}>
{menuItems}
</IconMenu>
</Paper>
);
}
_iconMenuClick(event) {
MenuItem.onClick(event);
event.stopPropagation();
}
776
To stop the click event from propagating to the <div> element, you have to call the stopPropagation() method in the event handler of the button: btn. addEventListener('click', (e) => { e. stopPropagation(); alert('The button was clicked!
stopPropagation() The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
event.stopPropagation() To use this: Make sure to pass the event object as a parameter. Use the stopPropagation method on the event object above your code within your event handler function.
Just pass the event into the original click handler and call preventDefault(); .
In addition to using event.stopPropagation();
It is useful to note that it should be written within a onClick event handler.
I made the mistake of writing it inside an onChange event handler, and that wasn't working.
I found that solution here
EDIT:
<ListItem button onClick={this.handleListItemClick}>
- <Checkbox onChange={this.handleCheckboxChange} />
+ <Checkbox onClick={this.handleCheckboxChange} />
</ListItem>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
