禁用与div的任何交互（点击，拖动，滚动）

Question

我有一个带有jQuery全页插件的网站。我的移动导航打开，因此将主窗口转换为大约80％右侧并拖动以查看移动菜单。

Live preview（仅限移动版）

我在标题上单击.section切换.menu-open类，但如果用户在部分上拖动或滚动，则整页插件功能会扭曲窗口视图。

我需要禁用与.section的任何交互或siwtch与toggleClass的默认交互。

我试过了：

• e.preventDefault - 这会禁用点击.section div to toggleClass menu-open
• 指针 - 事件：无 - 不起作用

但是用户仍然可以与右侧的部分（白色div）进行交互。

1. 我想让他们点击它来切换菜单打开的课程，这样窗口就会被带回主视图。
2. 我想禁用滚动或拖动部分的功能，以防止jQuery Full页面重新计算窗口位置并在移动菜单打开时移动窗口。

这是我在jQuery中用来切换菜单并在点击部分时切换菜单的代码：

$('nav, .mobile-menu--close').click(function(e){
    $('body').toggleClass('menu-open');
});
$('.section').click(function(e){
    if ($('body').hasClass('menu-open')) {
        $('body').toggleClass('menu-open');
    };
});

我需要更新此位以检测是否（用户滚动或拖动'.section'）阻止默认的jQuery全页功能（滑动到其他部分或幻灯片）并只切换菜单打开类。

找到解决方案。发表于以下。

Answer 1

解。

我创建了一个固定的poheitioning固定顶部：0;右：0;底部：0;宽度：26％; background-image：线性渐变（从右到左渐变的阴影）;

当菜单关闭时，它的指针 - 事件：无;不透明度：0;

当菜单打开时，它的不透明度为：1; pointer-events：all;

它吸收了用户的任何交互，并将充当jQuery中的菜单打开切换按钮。 jQuery改变了下面的代码：

$('.mobile-shadow').click(function(e){
    $('body').toggleClass('menu-open');
});