Estoy usando esta directiva en vue 3 para hacer clic afuera
export default { beforeMount(el, binding, vnode) { el.clickOutsideEvent = function(event) { if (!(el === event.target || el.contains(event.target))) { binding.value(event, el); } }; document.body.addEventListener('click', el.clickOutsideEvent); }, unmounted(el) { document.body.removeEventListener('click', el.clickOutsideEvent); } };Estoy usando la mayor parte para el menú desplegable. Cuando haga clic fuera o haga clic en el elemento de la lista desplegable, cierre el menú desplegable.
Quiero usarlo en una barra lateral donde hay algunos campos de entrada (seleccionar, radio, etc.... para filtrar).
Funciona cuando hago clic en el botón para mostrar la barra lateral, y cuando hago clic fuera de la barra lateral, la cierro. La directiva funciona como debería.
pero... Quiero cambiar esa directiva (o crear otra especialmente para esta barra lateral) cuando haga clic en el contenido de la barra lateral (en cualquier lugar) o haga clic en los elementos de entrada de la barra lateral... para no cerrar la barra lateral (solo cuando haga clic fuera la barra lateral para cerrarla).
Cómo puedo hacer eso ?
ACTUALIZAR
Estaba pensando en agregar un nombre de clase específico a cada elemento de la barra lateral y agregar esto a la condición if
if (!(el === event.target || el.contains(event.target) || event.target.classList.contains('specific-sidebar-class-name')))He agregado una identificación al componente de filtro de la barra lateral... y ahora, cuando haga clic dentro (en cualquier lugar de la barra lateral), no se cerrará
export default { beforeMount(el, binding, vnode) { el.clickOutsideEvent = function(event) { let sidebarFilter = document.getElementById('sidebar-filter-component') let clickedInsideSidebar = sidebarFilter && (event.target === sidebarFilter || sidebarFilter.contains(event.target)) if (!(el === event.target || el.contains(event.target) || clickedInsideSidebar)) { binding.value(event, el); } }; document.body.addEventListener('click', el.clickOutsideEvent); }, unmounted(el) { document.body.removeEventListener('click', el.clickOutsideEvent); } };