删除元素上的触摸事件

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 { pointer-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');