禁用与 div 的任何交互（单击、拖动、滚动）答案

【问题标题】：Disable any interaction with div (click, drag, scroll)禁用与 div 的任何交互（单击、拖动、滚动）
【发布时间】：2017-10-23 11:34:22
【问题描述】：

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

Live preview（仅限手机版）

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

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

我试过了：

e.preventDefault - 这会禁用单击 .section div 来切换类菜单打开
指针事件：无 - 不起作用

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

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

这是我在 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 Full Page 功能（滑动到其他部分或幻灯片）并切换菜单打开类。

找到了解决办法。发布在下面。

【问题讨论】：

到目前为止你尝试过什么代码？
这里的实际问题是什么？当我单击菜单时，它以扭曲的方式打开？你能详细说明吗？发布一些代码，任何给我们更多信息的东西。
我已经添加了到目前为止我尝试过的内容以及屏幕截图和一些关于我想要实现的目标的信息。我希望我已经更好地解释了我的问题。如果您需要更多信息，请告诉我。

标签： javascript jquery css menu

【解决方案1】：

解决方案。

我已经创建了一个固定的固定顶部：0;右：0；底部：0；宽度：26%； background-image: linear-gradient(阴影从右到左渐变);

当菜单关闭时，它是指针事件：无；不透明度：0；

当菜单打开时，它的不透明度：1；指针事件：全部；

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

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

【讨论】：