Layers with higher z-index gets ignored by touches on Windows Phone 8 Cordova HTML5 App

Question

We are porting a cordova app from iOS / Android to Windows Phone 8 and have a problem with our overlays. The overlay is a div that has an higher z-index defined than the divs beneath and the it contains several controls (eg inputs). The problem we have is that the overlay div is ignored by touch events, instead the events on the underlying divs(which should be locked by the overlay) are fired. I tried to set -ms-touch-action:none css property to the underlying divs with no success.

Any help would be appreciated.

Thank you, guys.

Answer 1

The solution was the trick @frank posted in his comment. Just do

event.preventDefault() 

in a click handler for the overlay. Or the angular way

ng-click="$event.preventDefault()".

Also described here: Locking screen by z-index in windows phone

Thanks for the help, guys, especially @frank

Answer 2

Here is some pseudo code that shows the fundamental markup and CSS

<div id="page">
    <div id="overlay">
    <div id="overlay-content">
        <div>
            <input type="text"/>... and so on...
        </div>
    </div>
    </div>  
    <div id="page-content">
        <div>
            <div id="button" onclick="..."></div>
        </div>      
    </div>
</div>

 #overlay{
    z-index: 7000;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
}

#page-content{  
    width: 100%;
    height: auto !important;
    min-height: 100%;
    position: relative;
}