IOS 5 (safari) 错误与“位置：固定”div 上的 HTML 触摸事件答案

【问题标题】：IOS 5 (safari) bug with HTML touch events on "position:fixed" divIOS 5 (safari) 错误与“位置：固定”div 上的 HTML 触摸事件
【发布时间】：2012-01-10 19:58:02
【问题描述】：

我在滚动网页上有一个位置：固定 div。

起初该事件有效，但是当页面滚动时，虽然固定的 div 保持在原位，但它的“触摸”区域似乎发生了变化（它似乎滚动 - 除了在另一个 div 的顶部，或者取决于页面布局...）。如果滚动太多，最终不会再收到触摸事件。有时底层 div 会接收事件。

示例如下：

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

当您滚动足够多并触摸其左侧的红色“固定”div 时，什么也没有发生（无警报）。但是，在右侧（绿色滚动 div 上方）它可以工作...？！

对我来说看起来像是一个 Safari 错误。你有同样的经历吗？任何解决方法的想法？（Iscroll 是不可能的 - 太慢了）

谢谢你，液晶

【问题讨论】：

你提交bug report了吗？
谢谢，现在我做到了（Bug ID# 10675212）
有人找到解决方案了吗？

标签： javascript iphone html ios touch

【解决方案1】：

我找到了一个相对奇怪的解决方案来解决这个错误。通过添加一个 touchstart 事件侦听器和一个空白事件处理程序，它似乎以某种方式在手动触摸时移动了触摸区域。我不知道这是否是 JavaScript 滚动问题的解决方案。

代码：

document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});

发现此方法的功劳归于this github bug discussion 中的pamelafox。

【讨论】：

这对我有用。当页面向下滚动时，我遇到了一个问题，即固定元素没有接收到触摸事件。固定！
同样，我有一个以编程方式固定的 div，其下方带有锚标签。 div 没有接收到触摸事件，但锚点接收到了。实施上述解决方案对我有用。
代码有轻微的语法错误。应该是：document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});
这段代码，加上[0]，在iOS 5、iPod Touch上对我有用
我不敢相信它成功了！我必须将它添加到 position: fixed 元素，而不是正文，顺便说一句。

【解决方案2】：

我也有同样的问题。这似乎是一个 z-index 问题，当 div 以编程方式移动时（使用动画等）：固定位置的 div 无法正常工作，因为用户没有再次触摸滚动。只有在最后一种情况下，div 似乎才被正确地重新计算。

【讨论】：

【解决方案3】：

我遇到了这个问题。我绕过它的方法是绑定到“click”而不是“touchstart”。

这意味着我的“点击”事件搞砸了（对于不使用触摸设备的用户），所以我首先检测到悬停，然后使用悬停告诉我他们是否是触摸用户。有点脏，但可以！

【讨论】：

【解决方案4】：

我也发现了这个错误，但下面似乎为我清除了它：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">`

将其添加到您的 html 标题中

【讨论】：

虽然这是一个 iOS 问题：这也不适用于 Android。

【解决方案5】：

我在使用固定位置导航时遇到了同样的问题，该导航使用 jQuery 动画在页面中滚动用户。我不相信这是一个 z-index 问题。我发现当动画移动视口时，固定位置的元素实际上仍然在之前的位置，直到用户触摸并移动屏幕。此时导航的位置被更新。更多信息和演示在这里：http://bit.ly/ios5fixedBug

【讨论】：

【解决方案6】：

这个问题可能与另一个发布了一些解决方法的问题有关。移动 safari 上的固定定位实现充其量只是半心半意。

Fixed position navbar only clickable once in Mobile Safari on iOS5

【讨论】：

【解决方案7】：

触摸事件检索 pageX 和 pageY - 这表明“页面”上的位置是指。如果页面向下滚动，Y 坐标会增加，因此固定元素将无法触及，因为它们的 y 偏移值保持不变。您可以通过此计算检查滚动页面上的固定元素是否已被触摸：

var finger = e.touches[0];
var yCalc = finger.pageY - window.pageYOffset;
var touchedElement = document.elementFromPoint(finger.pageX, yCalc);

如果你有水平滚动，你当然必须对 x 坐标做同样的事情。

【讨论】：