如何在固定位置的元素中强制元素响应Android web浏览器上的javascript onclick事件?

In the following code, the onclick event never fires when using android browser:

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

Style:

风格:

#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;  }

This works fine in Safari on iPhone and Chrome on desktop.

这在iPhone的Safari浏览器和桌面的Chrome浏览器上运行良好。

Here is an example you can try for yourself on an Android device: http://kortina.net/android.html

这里有一个你可以在Android设备上自己尝试的例子:http://kortina.net/android.html

4 个解决方案

#1

I'm pretty sure that the Android browser doesn't support fixed position. I don't believe mobile safari on iphone did either, until they added support in iOS 5. (some people have recreated fixed position using javascript, i.e. http://daringfireball.net/2009/12/pastrykit — post ios 5 this will no longer be necessary)

我很确定Android浏览器不支持固定位置。我不相信iphone上的移动safari浏览器也能做到这一点，直到他们在iOS 5中添加了支持。(有些人已经用javascript重新创建了固定的位置，比如http://daringfireball.net/2009/12/pastrykit -发布ios5这将不再需要)

#2

YES! Of course you can use position fixed. It is supported above 2.2 in Android. But still is buggy. http://kentbrewster.com/android-scroller/ shows you how. Basically you need to disable zoom in your with

是的!当然你可以用固定的位置。Android支持超过2.2。但仍是车。http://kentbrewster.com/android-scroller/展示了如何。基本上你需要禁用缩放

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

I had the same problem that touch events were falling through position fixed. I finally figured out why. You need to make sure the parent doesn't have a webkit hack like using translate3d or translateZ.

我遇到了同样的问题，触摸事件通过固定的位置下降。我终于明白了为什么。您需要确保父类没有像使用translate3d或translateZ那样的webkit破解。

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

Thus in my mobile web framework I do the following. I think you can read my example from my code base:

因此，在我的移动web框架中，我做了以下工作。我想你可以从我的代码库中读到我的例子:

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

And there you go, now position fixed will now allow touch events, because it isn't rendered using webkit transforms.

好了，现在位置固定将允许触摸事件，因为它不是通过webkit转换呈现的。

Since you are using transforms on your fixed element, that's problem what is happening. Try disabling any css3 animations.

由于您正在对固定元素使用转换，所以问题是正在发生什么。尝试禁用任何css3动画。

#3

I'd favor using id's that start with letters just in case certain browsers don't follow W3C's definition of id.

我倾向于使用以字母开头的id，以防某些浏览器不遵循W3C的id定义。
A void element, like br, may leave out the self-closing / character in HTML5. If this is a stylistic change, it would make more sense to adjust the element's style (CSS) (i.e., height) rather than it's content (HTML).

一个void元素，比如br，可能会漏掉HTML5中的自闭/字符。如果这是一种风格上的改变，那么调整元素的样式(即CSS)会更有意义。，而不是内容(HTML)。
Why not just use jQuery? It's fast, promotes Unobtrusive JavaScript, and has already worked out all the cross-browser compatibility issues related to JavaScript Event Handling. Also, Google optimizes the initial page load of the jQuery source (which is often already cached in the browser because so many other sites load it).

为什么不用jQuery呢?它速度很快，促进了不引人注目的JavaScript，并且已经解决了与JavaScript事件处理相关的所有跨浏览器兼容性问题。另外，谷歌优化了jQuery源的初始页面加载(通常已经在浏览器中缓存了，因为其他很多站点都在加载它)。

I haven't tested this, but according to the jQuery docs on .click() and the jQuery docs on .css(), it'd look something like this:

我还没有对此进行测试，但是根据.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>
```
If that doesn't work on all modern browsers, including Android's, I'd file a jQuery bug report.

如果它不能在包括Android在内的所有现代浏览器上运行，我将提交一个jQuery bug报告。

#4

The solution is to simply attach a touch event to any non-fixed element that will pick up the touch event as it bubbles up from the fixed element.

解决方案是简单地将一个触摸事件附加到任何非固定的元素上，当触摸事件从固定的元素中冒出来时，就会触发触摸事件。

For example, attaching an event to the window:

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

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

All touch events will propagate to the window, even from fixed position elements. This is clearly a bug fix, but it works.

所有的触摸事件都将传播到窗口，甚至从固定的位置元素。这显然是一个bug修复，但它确实有效。

I originally answered on this issue as it was filed on Github, so you can see the full report here:

这个问题我最初是在Github上提交的，所以你可以在这里看到完整的报告:

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

#1

#2