Tengo un menú bastante típico en el que los elementos principales tienen niños que salen volando cuando te das la vuelta. Funciona muy bien por encima de 992px. Por debajo de 992, se supone que debe hacer clic/tocar el elemento superior para obtener el control flotante. Eso funciona bien, obtienes el puntero e incluso el nombre del archivo en la vista previa del enlace. Pero cuando hace clic/toca, simplemente permanece en la misma página y el control flotante colapsa. Lo único que puedo encontrar es la siguiente declaración en javascript. Si lo elimina, los controles flotantes no funcionan en absoluto. Si elimina && e.preventDefault() , los enlaces superiores funcionan pero el control flotante no sucede.
document.addEventListener("click",function(e){ e.target.closest(".menu-item-has-children") && window.innerWidth <= 992 && e.preventDefault() })Encontré la respuesta.
El preventDefault se transmite de padres a hijos (como los malos genes que te dejaron bizco).
Tienes que detener la propagación. En este caso, los hijos son elementos de lista en una segunda lista desordenada con una clase de submenú.
$('.sub-menu').on("click", function(e){ e.preventDefault(); }).children().click(function(e) { // catch all children click e.stopPropagation(); });Javascript, detener preventDefault () para pasar al elemento secundario