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

【问题标题】：How can I force elements inside a fixed positioned element respond to javascript onclick events on the Android web browser?如何强制固定定位元素内的元素响应 Android Web 浏览器上的 javascript onclick 事件？
【发布时间】：2011-10-06 15:05:56
【问题描述】：

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

【问题讨论】：

你试过position: absolute吗？ Android 浏览器可能对position: fixed 的支持较差。

标签： javascript android css

【解决方案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 hack。

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

因此，在我的移动 Web 框架中，我执行以下操作。我认为您可以从我的代码库中阅读我的示例：

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

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

由于您在固定元素上使用了变换，所以这就是正在发生的问题。尝试禁用任何 css3 动画。

【讨论】：

所以如果我们想在移动设备上识别转换元素上的触摸事件，我们基本上只是运气不好？

【解决方案2】：

我倾向于使用以字母开头的id，以防某些浏览器不关注W3C's definition of id。
void element, like br, may leave out the self-closing / character in HTML5。如果这是一种风格变化，那么调整元素的样式 (CSS)（即高度）而不是内容 (HTML) 会更有意义。
为什么不直接使用jQuery？速度快，推广Unobtrusive JavaScript，已经解决了与JavaScript Event Handling相关的所有跨浏览器兼容性问题。此外，Google optimizes the initial page load of the jQuery source（通常已经缓存在浏览器中，因为有很多其他网站加载它）。

我没有对此进行测试，但根据jQuery docs on .click() 和jQuery docs on .css()，它看起来像这样：
```
<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 bug report。

【讨论】：

【解决方案3】：

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

【讨论】：

根据你和 Boris 的建议，我尝试了 absolute，这似乎确实有效：kortina.net/android-absolute.html - 所以我只需要弄清楚我是否真的需要修复，或者可以使用 absolute 和一些javascript 来完成同样的事情。

【解决方案4】：

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

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

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

所有的触摸事件都会传播到窗口，即使是从固定位置的元素。这显然是一个错误修复，但它确实有效。

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

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

【讨论】：