[英]Layers with higher z-index gets ignored by touches on Windows Phone 8 Cordova HTML5 App
我们正在将Cordova应用程序从iOS / Android移植到Windows Phone 8,并且覆盖层有问题。 叠加层是一个div,具有比下面的div更高的z-index定义,并且它包含多个控件(例如输入)。 我们遇到的问题是,触摸事件会忽略覆盖div,而会触发底层div(应由覆盖锁定)上的事件。 我尝试将-ms-touch-action:none css属性设置为基础div,但没有成功。
任何帮助,将不胜感激。
感谢大伙们。
解决方法是@frank在他的评论中发布的技巧。 做就是了
event.preventDefault()
在叠加层的点击处理程序中。 或成角度的方式
ng-click="$event.preventDefault()".
在此也进行了说明: 在Windows Phone中按z-index锁定屏幕
谢谢大家的帮助,尤其是@frank
这是一些伪代码,显示了基本的标记和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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.