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

Question

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

<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.

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

Answer 1

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

<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.

-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:

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.

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

Answer 2

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

2. 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) (ie, height) rather than it's content (HTML).

3. 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).

   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:

    <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 .

Answer 3

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.

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

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

Answer 4

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, ie http://daringfireball.net/2009/12/pastrykit — post ios 5 this will no longer be necessary)