0

（网站链接已被作者删除）

情况是页面上有两个 V 形锚 ( <a>)。（它们是通过 javascript 添加到 DOM 中的）一个是“上一个”，另一个是“下一个”。通过点击“Next”锚点，该toNextSection()功能将被触发，页面将滚动到下一部分，反之亦然。

这适用于所有桌面浏览器，但在 iPad 上很奇怪。

最初，这两个 V 形是与“点击”事件绑定的。然后我尝试将代码更改为以下以解决 iPad 问题，但问题仍然存在。所以我想问题不在于事件类型。

var clickEvent = navigator.platform.match(/iPad/i) ? 'touchstart' : 'click';
$('#sectionnav .prev a').on(clickEvent, function() { toPrevSection() });
$('#sectionnav .next a').on(clickEvent, function() { toNextSection() });


到目前为止，我收集了一些关于 iPad 问题的信息：

  • 第一次点击“下一个”V 形，页面成功滚动到下一个部分。但在那之后，你不能再点击任何一个 V 形。第二次点击它们没有任何作用。

  • toPrevSection()我曾尝试用一行替换函数的所有内容： alert('Test');，然后点击“上一个”人字形总是可以成功显示警报框。但如前所述，在点击“下一个”字形将页面滚动到下一部分后，点击“上一个”字形将不再显示任何警告框。

  • 我试过setInterval('toNextSection()', 10000);or setInterval(function() { $('#sectionnav .next a').trigger('touchstart') }, 10000);，页面可以成功自动滚动到最后。

  • 如果您在点击“下一个”V 形之前手动将页面向前滑动一点，那么点击“下一个”V 形将无法再滚动页面。

新的：

  • 我还尝试将单击事件绑定到其他元素，例如页脚中的徽标或图像。问题是一样的。第一次敲击有效，第二次敲击无效。

  • 在点击“下一步”V 形（或与单击事件绑定的任何内容）并且页面滚动到下一部分后，页面上的所有超链接和表单按钮都不再起作用（点击它们没有任何作用）。

  • 当页面设置为自动滚动时（setInterval如上所述），在页面开始自动滚动之前点击“下一步”V 形仍然有效（自动滚动也有效）。但是在页面开始自动滚动后，页面上的所有超链接和表单按钮都不再起作用（点击它们没有任何作用）。


任何建议将不胜感激。谢谢！

4

2 回答 2

1

您是否检查过其他元素，因为屏幕正在更改，放置在按钮上方并阻止它们被触摸？
您可以更改按钮 z-index 以将它们放置“更高”，但只有当它们的位置属性是绝对或相对等时才会起作用。

好的

试试看这个页面的第 5 点，它是关于 iOS safari 上的触摸事件。 https://developer.apple.com/library/safari/#technotes/tn2010/tn2262/_index.html

于 2012-07-14T16:50:37.543 回答
1

很难调试，因为它实际上只发生在 iOS 设备（和模拟器）上。我几乎可以肯定这与您的 JavaScript 无关，而仅与页面滚动和元素定位以及它在 iOS 上的处理方式有关。这甚至可能是 iOS Safari 中的一个错误（见下文）。

似乎大多数链接（next、previous、Twitter等Facebook）仅在您的页面处于其原始位置时才有效（您提到了这一点）。例如，您可以单击next，然后滚动回到开头并next再次单击。因此，按钮似乎按应有的方式显示，但可点击区域位于可见区域之外的原始位置。

另一个观察结果：正如您所说，您单击后没有任何链接有效next。但是，当您在向右滚动后重新加载页面时，next仍然previous没有效果（页面会自动滚动到之前的位置），但所有其他链接都可以工作。

我发现了另一个提到这一点的问题，提供了一个简单的示例页面，该页面仍然在 iOS 5.1 模拟器中显示了这种奇怪的行为。建议的解决方案（现在有 16 个赞成票）是设置position:relative、滚动，然后position:fixed再次设置（顺便说一句，仅iOS5 支持，但我想这就是你正在使用的）。与该示例相反，我无法在您页面的某处找到可点击区域。

除了尝试该解决方法之外，我还建议您采取以下措施来解决这个问题：

  • 尝试降低你的风格，直到定位有效，你有position:absolute很多position:fixed元素。

  • 取消链接scroll事件处理程序，除了可能导致您的问题之外，这确实会妨碍使用该站点。充其量，您将内容定位和垂直滚动完全分开。我不确定这对视差效果意味着什么。

希望这有助于解决此问题并祝您好运。

编辑：报告了一个错误（状态duplicate- 我没有找到原件）。此外，另一个答案中描述的修复对我有用。

于 2012-07-15T10:50:27.663 回答