在下面的代码中,onclick 事件在使用 android 浏览器时永远不会触发:
<div id="__log"></div>
<div id="hud">
<div>Hello</div>
<div>
<a style="border:1px solid #fff;" href="#" onclick="document.getElementById('__log').innerHTML = document.getElementById('__log').innerHTML + '<br />clicked'; return false;">Click Me</a
</div>
</div>
风格:
#hud {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 10px;
background:transparent url('gray95op.png') repeat;
-webkit-transform: scale(1);
-webkit-transition: all 0.25s ease-in-out;
position: fixed;
top:10px;
left:0;
right:0;
margin:0 auto;
width: 75%;
z-index: 1001;
color: #fff;
text-align:center;
}
#hud a { color: #ccc; z-index:1002; }
这在 iPhone 上的 Safari 和桌面上的 Chrome 中运行良好。
这是一个您可以在 Android 设备上自己尝试的示例:http://kortina.net/android.html
最佳答案
是的!当然你可以使用固定位置。 Android 2.2以上版本支持。但仍然是 buggy 。 http://kentbrewster.com/android-scroller/告诉你如何。 基本上你需要禁用放大你的
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1" />
我遇到了同样的问题,即触摸事件通过固定位置下降。我终于明白为什么了。您需要确保父级没有像使用 translate3d 或 translateZ 这样的 webkit hack。
-webkit-transform: translate3d(0, 0, 0);
因此,在我的移动网络框架中,我执行以下操作。我想您可以从我的代码库中阅读我的示例:
body:not([data-platform=android]) > .apps > section {-webkit-transform: translate3d(0, 0, 0);}
好了,现在固定位置将允许触摸事件,因为它不是使用 webkit 转换呈现的。
由于您在固定元素上使用变换,所以这就是发生的问题。尝试禁用任何 css3 动画。
关于javascript - 如何强制固定定位元素内的元素响应 Android 网络浏览器上的 javascript onclick 事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7676354/