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

Question

在以下代码中，使用Android浏览器时onclick事件永远不会触发：

<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以上。 但仍然是马车。 http://kentbrewster.com/android-scroller/向您展示如何。 基本上你需要禁用缩放功能

<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1" />

我有同样的问题，触摸事件通过固定的位置下降。 我终于找到了原因。 您需要确保父级没有像使用translate3d或translateZ那样的webkit黑客。

-webkit-transform: translate3d(0, 0, 0);

因此，在我的移动Web框架中，我执行以下操作。 我想你可以从我的代码库中读取我的例子：

body:not([data-platform=android]) > .apps > section {-webkit-transform: translate3d(0, 0, 0);}

你去了，现在固定的位置现在允许触摸事件，因为它不是使用webkit变换呈现的。

由于您在固定元素上使用转换，因此发生了什么问题。 尝试禁用任何css3动画。

Answer 2

1. 我倾向于使用以字母开头的id ，以防某些浏览器不遵循W3C对id的定义 。

2. 像br这样的void元素可能会忽略HTML5中的自闭/字符 。 如果这是一种风格变化，那么调整元素的样式（CSS）（即高度）而不是内容（HTML）会更有意义。

3. 为什么不直接使用jQuery ？ 它很快，推广了Unobtrusive JavaScript ，并且已经解决了与JavaScript事件处理相关的所有跨浏览器兼容性问题。 此外， Google优化了jQuery源的初始页面加载 （通常已经在浏览器中缓存，因为有很多其他站点加载它）。

   我没有测试过这个，但根据.click（）上的jQuery文档和.css（）上的jQuery文档 ，它看起来像这样：

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script> $("#__log").click(function () { $(this).css('height', "+=10px"); }); </script> 

   如果这不适用于所有现代浏览器，包括Android，我会提交一个jQuery错误报告 。

Answer 3

解决方案是简单地将触摸事件附加到任何非固定元素，该元素将在从固定元素冒泡时拾取触摸事件。

例如，将事件附加到窗口：

$(window).on('touchstart', function () {});

即使从固定位置元素，所有触摸事件也将传播到窗口。 这显然是一个错误修复，但它的工作原理。

我最初是在这个问题上回答的，因为它是在Github上提交的，所以你可以在这里看到完整的报告：

https://github.com/jquery/jquery-mobile/issues/3912

Answer 4

我很确定Android浏览器不支持固定位置。 我不相信iphone上的移动游猎也没有，直到他们在iOS 5中添加支持。（有些人使用javascript重新创建固定位置，即http://daringfireball.net/2009/12/pastrykit - post ios 5这将不再需要）