I’m looking for a way to detect if a click event happened outside of a component, as described in this article. jQuery closest() is used to see if the target from a click event has the dom element as one of its parents. If there is a match the click event belongs to one of the children and is thus not considered to be outside of the component.
So in my component, I want to attach a click handler to the window. When the handler fires I need to compare the target with the dom children of my component.
The click event contains properties like “path” which seems to hold the dom path that the event has traveled. I’m not sure what to compare or how to best traverse it, and I’m thinking someone must have already put that in a clever utility function… No?
The next answer uses ES6 and follows best practices for binding and setting the ref using a method: To see it working: .\n\nHooks Implementations Class Executation after React 16.3 Class Implementation Before Reacted 16.3.\n\nHooks Implementation: Import React; useRef, useEffect () from \”react\”; .\n\nIn /** * * ******* useEffect((ref) => (** & ) * ** ** * Alert if you clicked on outside of element *_EVENTVENT] return ( (() \”Unbinded the event event))\” ((event.defence) — — \”It\’s important to avoid the use of [[[ef] ] [unbinder]] on clean up document.removee;; (); advanced)\n\n/** * Component that alerts when you click outside of it */ export default function OutsideAlerter(props) const wrapperRef = useRf(null); useOutsideALERTER(wrapperR); .\n\nReject div ref=wrapperRef>props.children/div>; .\n\nClass Implementation: After 16.3 import React, Component (from \”react\”); .\n\n/** * Component that alerts when you click outside of it */ export default class OutsideAlerter extendsComponent constructor(props) – super( Props); .\n\nThis .wrapperRef = React.createRf(); this.handleClickOutside = This.HlickInside.bind(this);\n\nThis.handleClickOutside); document.addEventListener(\”mousedown\”, componentDidMount() .\n\nThis.handleClickOutside); document.removeEventListener(\”mousedown\”, componentWillUnmount() .\n\nIf you clicked on outside of element */ handleClickOutside(event) if (this.wrapperRef && !this!WrappperRétiéti) alert((You clicked off off of me!\”)\n\nreturn div ref=this.wrapperRef> this.props.children/div> – render() .\n\nBefore 16.3 import React, Component – from \”react\” ; .\n\n/** * Component that alerts when you click outside of it */ export default class OutsideAlerter extendsComponent constructor(props) – super( Props); .\n\nThis.setWrapperRef = this.settingW RapperF.bind(this); this .handleClickOutside=this; ?\n\nThis.handleClickOutside); document.addEventListener(\”mousedown\”, componentDidMount() .\n\nThis.handleClickOutside); document.removeEventListener(\”mousedown\”, componentWillUnmount() .\n\n/** * SET the wrapper ref */ setWrapperRef(node) this.wrappers Ref = node; .\n\nIf I clicked on outside of element */ handleClickOutside(event) if (this.wrapperRef && !This.WrapPERF.contains(Event.target)) alert(\”You clicked off of me!\”); \”-\” * Alert.\n\nreturn div ref=this.setWrapperRef> this.props.children/div>; .
