iOS 5（Safari）错误与HTML位置“固定”触摸事件DIV [英] IOS 5 (safari) bug with HTML touch events on "position:fixed" div
问题描述
起初这个事件是有效的，但是当页面滚动的时候，当修复过的div保持原状时，它的触摸区似乎会改变（它似乎滚动 - 除了另一个div的顶部，或根据页面布局...）。最后，如果滚动过多，则不会再收到触摸事件。
有时底层div接收事件。
下面是示例：
< HTML>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8>
< meta name =viewportcontent =width = device-width; initial-scale = 1.0; maximum-scale = 1.0; user-scalable = no;>
< meta name =apple-mobile-web-app-capablecontent =yes/>
< style>
#fixed {
position：fixed;
width：200px;
height：200px;
z-index：1;
背景：rgba（100,0,0,0.5）;
}
#scrolling {
display：block;
位置：绝对;
top：100px;
left：100px;
width：200px;
height：999px;
背景：rgba（0,100,0,1）;
}
< / style>
< / head>
< body>
< div id =fixedontouchend =alert（'touch fixed'）>< / div>
< div id =scrollingontouchend =alert（'touch scrolling'）>< / div>
< / body>
当您滚动到足够的位置并且触摸左侧的红色固定div时，发生（无警报）。但是，在右侧（在绿色滚动div上方），它可以工作......？！
看起来像是一个Safari bug。你有同样的经历吗？
任何想法的解决方法？ （Iscroll无可奈何 - 太慢了）
谢谢，
LC
我发现了一个比较奇怪的解决方案。通过添加touchstart事件侦听器和一个空白事件处理程序，似乎可以通过手动触摸移动触摸区域。我不知道这是否是JavaScript滚动问题的解决方案。
代码：
document.getElementsByTagName（ 正文）[0] - 阅读进度 - （ touchstart，函数（）{}）;
用于查找此方法的信用转至pamelafox，位于此github bug讨论。
I have a position:fixed div on a scrolling web page.
At first the event works, but when the page scroll, while the fixeed divs stays in place, its "touch" zone seems to change (it seems to scroll - except on top of another div, or depending on the page layout...). Eventually no touch event is received any more if you scroll too much. Sometimes the underlying div receives the event instead.
Here's the sample:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
#fixed {
position: fixed;
width:200px;
height:200px;
z-index:1;
background: rgba(100,0,0,0.5);
}
#scrolling {
display: block;
position: absolute;
top: 100px;
left: 100px;
width:200px;
height:999px;
background: rgba(0,100,0,1);
}
</style>
</head>
<body>
<div id="fixed" ontouchend="alert('touch fixed')"></div>
<div id="scrolling" ontouchend="alert('touch scrolling')"></div>
</body>
When you scroll enough and touch the red "fixed" div on its left side, nothing happens (no alert). However, on the right side (above the green scrolling div) it works... ?!
Looks like a Safari bug to me. Do you experience the same? Any idea for a workaround? (Iscroll is out of question - too slow)
Thank you, LC
I found a relatively strange solution to this bug. By adding a touchstart event listener and a blank event handler, it somehow seems to move the touch area on manual touch. I do not know if this is a solution for the JavaScript scroll issue.
Code:
document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});
Credit for finding this method goes to pamelafox in this github bug discussion.
这篇关于iOS 5（Safari）错误与HTML位置“固定”触摸事件DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
