删除元素上的触摸事件

Question

我有一个 DIV #overlay 位于 DIV #page 之上，但在 #page div 上，元素上有一个 overscroll: auto 。

当 #overlay 可见时，如何禁用 #page 上的所有触摸事件，然后在 #overlay 隐藏时重新启用？

<div id="page">touchable content here</div>
<div id="overlay">sits on top of #page DIV</div>

这仅适用于移动 webkit。

Answer 1

CSS 解决方案 div#page { point-events: none; }

---

jQuery 解决方案

您的触摸事件 -

$('#page').click(function () {
    if($(this).hasClass('blockEvent')) return false;
    //do something...
});

当 #overlay 弹出时 -

// display #overlay
$('#page').addClass('blockEvent');

当 #overlay 关闭时 -

// close #overlay
$('#page').removeClass('blockEvent');