响应站点的导航菜单的jquery click事件冲突

Question

I am implementing a mobile navigation menu and I want to capture the click event on the non-menu area in order to close the menu.

//#1 click event - opening menu when user clicks on button
$('.mobile-menu-toggler').on('click', function(){
   $('.navi-mobile').addClass('nav-mobile-open');
   $('.site-page').addClass('site-page-open');
});

//#2 click event - hide menu when user clicks on outside nav
$(document).on('click', function(e){
    var obj = $('.navi-mobile')
    var nav_open = obj.hasClass('nav-mobile-open');
    var ext = (e.target == obj[0]);

    if (nav_open && !ext) {
        e.preventDefault();
        console.log('hide menu')
    }
});

The problem is that event #2 gets fired at the same time as #1 when the user opens the nav. And the conditions in #2 are allowing the hide action to take place.

Answer 1

One valid approach is to prevent the effect of #2 when the event #1 is fired. You can do it using stopPropagation function in #1

//#1 click event - opening menu when user clicks on button
$('.mobile-menu-toggler').on('click', function(e){
   e.stopPropagation();
   $('.navi-mobile').addClass('nav-mobile-open');
   $('.site-page').addClass('site-page-open');
});

Also you can check if the clicked dom element has a parent with class nav-mobile-open, and stop the event if this condition is true.

var nav_open = obj.hasClass('nav-mobile-open');
if(obj.parents('.nav-mobile-open').length) nav_open = true;

Regards.

jQuery .stopPropagation Documentation

Answer 2

Try adding a stopPropagation() function to your document.click declaration

//#2 click event - hide menu when user clicks on outside nav
$(document).on('click', function(e){

    e.stopPropagation(); // HERE

    var  obj = $('.navi-mobile')
    var nav_open = obj.hasClass('nav-mobile-open');
    var ext = (e.target == obj[0]);

    if (nav_open && !ext) {
        e.preventDefault();
        console.log('hide menu')
    }
});

here 'sa link for more info