如何強制固定定位元素內的元素響應Android Web瀏覽器上的javascript onclick事件？

在下面的代碼，onclick事件使用Android瀏覽器時永遠不會觸發：如何強制固定定位元素內的元素響應Android Web瀏覽器上的javascript 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

來源

2011-10-06 kortina

你試過'位置：absolute'呢？ Android瀏覽器對'position：fixed'的支持可能不足。 –

我敢肯定的是，Android的瀏覽器不支持固定位置。我不相信手機iPhone上的Safari或者做，直到他們的iOS 5增加了支持（有些人使用JavaScript，即http://daringfireball.net/2009/12/pastrykit重新定位 - 對後的iOS 5，這將不再是必要的）

來源

2011-10-06 15:46:14 Ted

根據你和鮑里斯的建議，我嘗試了絕對的，這似乎工作：http://kortina.net/android-absolute.html - 所以我只需要弄清楚，我是否真的需要修復，或可以使用絕對和一些JavaScript來完成同樣的事情。 – kortina

我傾向於使用以字母開頭的id，以防某些瀏覽器不遵循W3C's definition of id。
A 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的，我'd檔案jQuery bug report。

來源

2011-10-06 18:02:18 ma11hew28

是的！當然你可以使用固定的位置。它在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動畫。

來源

2012-02-07 22:56:11

所以我們基本上只是運氣不好，如果我們想要識別移動設備上的變形元素上的觸摸事件？ – tommybananas

解決的辦法是簡單地將觸摸事件附加到任何非固定元素，它會在固定元素冒泡時拾取觸摸事件。

例如，一個事件附着到窗：

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

所有觸摸事件將傳播到的窗口，即使是從固定位置的元件。這顯然是一個錯誤修復，但它的工作原理。

我最初回答這個問題，因爲它是在Github上提交的，所以你可以看到完整的報告在這裏：

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

來源

2014-03-07 00:02:53 TaylorMac

如何強制固定定位元素內的元素響應Android Web瀏覽器上的javascript onclick事件？

回答

相關問題