0
151
ViewsEvento activado varias veces con window.addEventListener en Vue
Tengo este código html dentro de mi componente Vue
<div id="stats" class="" @click="clickOutside()"> <ArticleStats :article="article" class="tw-mt-5 tw-hidden md:tw-flex" /> <div @click="$router.push('/article/' + article.content_content_id)" class=" tw-mt-5 tw-block tw-text-center tw-text-sm md:tw-text-base tw-cursor-pointer tw-text-white tw-p-2 tw-rounded-2xl tw-w-full tw-bg-red-400 hover:tw-bg-red-600 hover:tw-text-white " > Leer más </div> </div>Y ese método clickOutside() es este:
clickOutside() { console.log('hola') window.addEventListener("mouseup", (e) => { console.log(e); const clickedE1 = e.target; if (this.$el.contains(clickedE1)) { console.log("inside"); } else { console.log("outside"); } }); },Pero cuando hago clic en ese div, el evento se dispara varias veces, esta es la respuesta en la consola con un solo clic:
¿Alguien puede saber cómo solucionarlo o por qué sucede esto?
2 answers
Answer question0
Esto es activado por el elemento y sus elementos secundarios, por lo que debe agregar el modificador self para evitar ese comportamiento:
<div id="stats" class="" @click.self="clickOutside()">Para obtener más detalles, consulte este https://vuejs.org/guide/essentials/event-handling.html#event-modifiers
0
Lo que finalmente hice fue crear un detector de eventos en el enlace creado, eliminarlo en el enlace destruido y agregar un método que detecte el objetivo, de esta manera:
created() { window.addEventListener("mouseup", this.onMouseUp); }, destroyed() { window.removeEventListener("mouseup", this.onMouseUp); }, methods: { onMouseUp(e) { const clickedE1 = e.target; if (this.$el.contains(clickedE1)) { console.log("inside"); } else { console.log("outside"); } }, },Y eso fue todo, finalmente funcionó como yo quería. Gracias por sus respuestas.