How can you remove a Jquery Document Click Listeners Effecting React Element? How can you remove a Jquery Document Click Listeners Effecting React Element? reactjs reactjs

How can you remove a Jquery Document Click Listeners Effecting React Element?


Solution #1 for jQuery events

You can use unbind to remove events.If you need know the event name or type, you can see with Chrome Dev Tools

Solution #2 Javascript events

Another method is capture the event and stop the propagation.You can use removeEventListener or set null the property event.


instead of trying to remove listeners, I suggest you don't attach them in the first place.

... can't remove junks of document listeners completely

since that is not an option, your second best bet is to modify the listeners so that they exit early if event.target is part of react app (you can verify that by doing document.getElementById('#your-react-dom-root').contains(event.listener))


There are lots of document on click event listeners

You must mean "There are lots of different components all over the page that have listeners on them."

In that case, there are a couple ideas here that may be helpful: Intercept all document link clicks