I have a pretty typical menu where the top items have children that fly out when you roll over. Works great above 992px. Below 992, you're supposed to click/tap the top item to get the flyout. That works fine, you get the pointer and even the file name in the link preview. But when you click/tap, it just stays on the same page and the flyout collapses. The only thing I can find is the statement below in javascript. If you delete it, the flyouts don't work at all. If you delete && e.preventDefault(), the top links work but the flyout doesn't happen.
document.addEventListener("click",function(e){
e.target.closest(".menu-item-has-children") && window.innerWidth <= 992 && e.preventDefault()
})
Found the answer.
The preventDefault is passed on from the parent to the children (like the bad genes that left you cross-eyed).
You need to stop the propagation. In this case, the children are list items in a second unordered list with a class of sub-menu.
$('.sub-menu').on("click", function(e){
e.preventDefault();
}).children().click(function(e) { // catch all children click
e.stopPropagation();
});