时间戳

首页 > 解决方案 > 如何防止触摸除使用 JavaScript 的元素之外的所有元素？

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

问题描述

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

body { overflow: hidden; }

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

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

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

然而，到处禁用触摸确实有效：

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

除了 popover 元素，我怎样才能在任何地方禁用它？

更新

弹出框 CSS：

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

标签： javascriptjquerytouch

解决方案

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

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

推荐阅读