boblauer / react-onclickout

An ES6-friendly on-click-outside React component.
MIT License
92 stars 14 forks source link

Optional useCapture for addEventListener #10

Closed maullerz closed 8 years ago

maullerz commented 8 years ago

With useCapture param we can use stopPropagation() and prevent event from bubling on above elements.

9

boblauer commented 8 years ago

This won't work. This component works because when the event bubbles, it will fire first on the element that was clicked, and then again on the window. When we get to the window's event listener, we can inspect the event and see which element was actually clicked, and from there call the onClickOut method if appropriate.

Your change will reverse the order, so that the window click event is fired first, and then the element's click event. To see this, set useCapture to true in the tests and run them. You'll see the tests fail.

maullerz commented 8 years ago

Oh sure, you are right. Can`t propose any alternative workaround now. So another way only to use faded/transparent background above ReactOnClickout to catch click-events.