z索引较高的图层在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;
}