针对响应式网站的导航菜单的jquery点击事件冲突

Question

我正在实施移动导航菜单，我想在非菜单区域捕获点击事件以关闭菜单。

//#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')
    }
});

问题是当用户打开导航时，事件＃2会在＃1的同时被触发。 ＃2中的条件允许隐藏动作发生。

Answer 1

一种有效的方法是在事件＃1被触发时防止＃2的影响。你可以使用＃1

中的stopPropagation函数来完成它

//#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');
});

此外，您可以检查点击的dom元素是否具有类nav-mobile-open的父级，如果此条件为真，则停止该事件。

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

问候。

jQuery .stopPropagation Documentation

Answer 2

尝试在document.click声明中添加stopPropagation（）函数

//#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是更多信息的链接