javascript - 如何强制固定定位元素内的元素响应 Android 网络浏览器上的 javascript onclick 事件？

Question

在下面的代码中，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

Answer 1

是的!当然你可以使用固定位置。 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 动画。