如何防止触摸除使用 JavaScript 的元素之外的所有元素？答案

【问题标题】：How to prevent touch on all elements except one using JavaScript?如何防止触摸除使用 JavaScript 的元素之外的所有元素？
【发布时间】：2019-02-18 00:00:50
【问题描述】：

我有一个弹出框，我想在它打开时防止在后台滚动。使用 CSS 为桌面执行此操作很容易：

body { overflow: hidden; }

然而，IOS 不遵守此规则，并且仍然允许在用户实际滚动弹出框时滚动背景。

禁用包含页面上所有内容的包装元素的触摸，除了弹出框不起作用：

document.querySelector('.wrapper').addEventListener('touchstart touchmove touchend', function (e) {
    e.preventDefault();
});

但是在所有地方禁用触摸确实有效：

$('*').bind('touchstart touchmove touchend', false);

如何才能在除弹出框元素之外的所有地方禁用它？

更新

弹窗 CSS：

.popover {
    background: rgba(255,255,255,.5);
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
}

【问题讨论】：

标签： javascript jquery touch

【解决方案1】：

另一种方法是将弹出框创建为单个整页 div，用于“阻止”事件到达正文。将弹出框放在此 div 前面。

您可以使用 JS 来阻止事件，也可以使用 element {point-events:none} 并使用 element {pointer-events:auto} '撤消'它

【讨论】：

我相信我的弹出框已经阻止了页面上的所有内容，请查看我对弹出框 CSS 的更新答案。