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.

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.

• javascript
• jquery
• webkit
• mobile-safari
• touch-event

Share Improve this question Follow edited Jan 19, 2012 at 5:11 calebo asked Jan 19, 2012 at 5:00 calebocalebo 3,4421010 gold badges4848 silver badges6969 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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