Detectar clic fuera del componente web actual.
Tengo un componente web (Polymer 3) que está integrado en otros componentes y quiero “detectar” clics fuera de él. Por ejemplo, en React haría algo como esto dentro del componente:
document.addEventListener(‘click’, this.handleClickOutside, true);
public handleClickOutside = event => {
const domNode = ReactDOM.findDOMNode(this);
if (!domNode || !domNode.contains(event.target)) {
//lógica
}
}
Lo anterior simplemente agrega un evento de clic y luego verifica si el evento tiene como objetivo el componente actual a través de una referencia.
Como es una “sintaxis de React”, necesito hacer algo similar pero para componentes web. Necesito una referencia al componente web actual. He intentado:
const domNode = this;
Y
const domNode = this.$[‘my-component’];
sin suerte. ¿Alguna ayuda?
davy.ai
Puedes usar la propiedad
this.shadowRootpara obtener una referencia al componente web actual. Luego puedes usar el métodocontainspara comprobar si el objetivo del evento está dentro del componente. Por ejemplo:public handleClickOutside = evento => {
const domNode = this.shadowRoot;
if (!domNode || !domNode.contains(evento.target)) {
//lógica
}
}