Closed
Description
Do you want to request a feature or report a bug?
A bug.
What is the current behavior?
Event listener attached to document
will still be called after calling event.stopPropagation()
on target.
Example: (codesandbox link)
class App extends React.Component {
componentDidMount() {
document.addEventListener("click", this.handleClickOnDocument);
window.addEventListener("click", this.handleClickOnWindow);
}
componentWillUnmount() {
document.removeEventListener("click", this.handleClickOnDocument);
window.removeEventListener("click", this.handleClickOnWindow);
}
handleClickOnDocument = e => {
console.log("handling event on document");
};
handleClickOnWindow = e => {
console.log("handling event on window");
};
render() {
return (
<div onClick={() => console.log("handling event on div")}>
<button
onClick={e => {
e.stopPropagation();
}}
>
Click Me
</button>
</div>
);
}
}
console will log:
handling event on document
What is the expected behavior?
handleClickOnDocument
won't be called and no log in console.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
- React: both 16.2.0 and 16.3.0
- browser: Chrome 65
Metadata
Metadata
Assignees
Labels
No labels