CODEWITHSUNDEEP
javascriptjquerywebkitmobile-safaritouch-event
calebo
calebo

Reputation: 3432

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.

Upvotes: 3

Views: 8431

Answers (1)

Ron
Ron

Reputation: 2790

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

Upvotes: 3

Related Questions