javascript - 响应式站点导航菜单的 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 的父元素，如果条件为 true，则停止该事件。

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

问候。

jQuery .stopPropagation Documentation