remove touch event on element


I have a DIV #overlay sitting over DIV #page, but on the #page div, theres a overscroll: auto on an element.

How can I disable all touch events on #page when #overlay is visible and then enable back once #overlay is hidden?

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

This is for mobile webkit only.

CSS Solution div#page { pointer-events: none; }


jQuery Solution

your touch event -

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

when #overlay pops up -

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

when #overlay closed -

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