Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

e.stopPropagation() seems to not be working as expect. #4335

Closed
luokuning opened this issue Jul 10, 2015 · 5 comments

Comments

Projects
None yet
5 participants
@luokuning
Copy link

commented Jul 10, 2015

I found this issue when I attempted to integrate ReacJs and a jQuery widget.

I bind an click event on input element and document like follow:

var Search = React.createClass({
    handleClick: function(e) {
        e.stopPropagation();
    },
    render: function() {
        return <input onClick={this.handleClick} />
    }
});
document.addEventListener('click', function() {
    console.log('propagation')
}, false);

And everytime I click the input element, chrome devtool logs 'propagation' message. Should not document element can not receive click event? I'm confused, Did I miss something?

@syranide

This comment has been minimized.

Copy link
Contributor

commented Jul 10, 2015

React (currently) uses a listener on the document for (almost) all events, so by the time your component receives the event it has already bubbled all the way up to the document and stopping it only stops it from synthetically bubbling up through the React hierarchy.

Related #2050

@luokuning

This comment has been minimized.

Copy link
Author

commented Jul 10, 2015

got it, many thanks :)

@syranide syranide closed this Jul 10, 2015

@fcsonline

This comment has been minimized.

Copy link

commented Jun 20, 2016

You can reproduce this issue in the following jsbin:

http://jsbin.com/rafitiq/edit?html,js,output

fcsonline added a commit to fcsonline/react that referenced this issue Jun 20, 2016

Listen DOM events in each React container
Current React implementation is attaching events to `document` level.
This is breaking bubbling DOM behaviour not letting users to play
properly with methods like `stopPropagtion`.

Also attaching events to containers instead of `document` integrates
better with other Javascript frameworks.

With this change we start attaching events at container level.

Fixes:
facebook#2043
facebook#4335

fcsonline added a commit to fcsonline/react that referenced this issue Jun 20, 2016

Listen DOM events in each React container
Current React implementation is attaching events to `document` level.
This is breaking bubbling DOM behaviour not letting users to play
properly with methods like `stopPropagtion`.

Also attaching events to containers instead of `document` integrates
better with other Javascript frameworks.

With this change we start attaching events at container level.

Fixes:
facebook#2043
facebook#4335

fcsonline added a commit to fcsonline/react that referenced this issue Jun 20, 2016

Listen DOM events in each React container
Current React implementation is attaching events to `document` level.
This is breaking bubbling DOM behaviour not letting users to play
properly with methods like `stopPropagtion`.

Also attaching events to containers instead of `document` integrates
better with other Javascript frameworks.

With this change we start attaching events at container level.

Fixes:
facebook#2043
facebook#4335

fcsonline added a commit to fcsonline/react that referenced this issue Jun 20, 2016

Listen DOM events in each React container
Current React implementation is attaching events to `document` level.
This is breaking bubbling DOM behaviour not letting users to play
properly with methods like `stopPropagation`.

Also attaching events to containers instead of `document` integrates
better with other Javascript frameworks.

With this change we start attaching events at container level.

Fixes:
facebook#2043
facebook#4335
@baurine

This comment has been minimized.

Copy link

commented Sep 16, 2018

a workaround, use window.addEventListener() to replace document.addEventListener, event.stopPropagation() can stop event propagate to window.

@JounQin

This comment has been minimized.

Copy link

commented Sep 28, 2018

@baurine You saved my life!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.