在 iOS MobileSafari 中防止默认按下而不是默认拖动？答案

【问题标题】：Prevent default Press but not default Drag in iOS MobileSafari?在 iOS MobileSafari 中防止默认按下而不是默认拖动？
【发布时间】：2011-07-17 21:54:37
【问题描述】：

上下文：MobileSafari/iPad 上的网络应用，全屏和嵌入 iframe

目标：为 Press 和 Tap 但不 Pinch（缩放）或拖动（滚动/平移）。我们希望为 Press 提供自定义行为，但仍让 Safari 处理 Scroll/Pan/Zoom。

问题：这两个目标似乎是相互排斥的。为了防止按下手势的默认行为，必须立即调用event.preventDefault 以响应ontouchstart。但是，要让默认行为在 Drag 上继续进行，我们必须不在初始 ontouchstart 上调用 event.preventDefault。一旦调用了 preventDefault，就无法在该手势序列期间恢复默认行为（即直到所有手指都松开）。在发生某些移动之前无法识别拖动。

拖动是最简单的示例，但我们也关心获得捏合和双击的默认行为。我们从不想要“复制图像”或选择文本的默认 MobileSafari Press 行为。

迄今为止的尝试：

保存 ontouchstart 事件，并在 timeout 之后调用 preventDefault （就在 Press 将被识别之前）。没有效果。
收听“oncontextmenu”。不，默认的 Press 行为不会通过此事件发出信号或路由。
在我们所有的 ontouch* 处理程序中阻止默认设置，然后当我们识别到拖动/捏合手势时，使用initTouchEvent 和/或initGestureEvent 模拟新事件。以编程方式创建的事件会触发所有 我们的 回调，但 Safari 似乎不理会它们，不会触发任何默认行为。
用一个假动作破坏 Safari 的 Press 识别。 Safari 会在最轻微的移动时取消按下，但我们允许有一点马虎。如果手指没有“真正”移动，则在 ontouchstart 之后模拟移动事件（如上）不会导致 Safari 无法识别 Press。

我们以 Apple 的native iOS gesture recognizers 风格实现了一套功能齐全的手势识别器（使用 Javascript，ontouch*）。我们识别任何手势都没有问题，只是我们不知道复制 Safari 免费提供的缩放/平移/双击行为的好方法。

我们不需要代码；我们正在寻找任何理论上的解决方案（除了“自己也可以实现平移/缩放”，但如果您有一种我们感兴趣的巧妙方法）可以带来合理的成功。我们也有兴趣了解其他类似的尝试 - 我们肯定不可能是第一个尝试这个的人？

Alternate TL;DR: 除了 touchstart 之外，还有什么方法可以防止默认按下（也称为长按）？

【问题讨论】：

标签： ipad web-applications webkit mobile-safari touch-event

【解决方案1】：

成功：完全通过 CSS 而不是 preventDefault 来防止“默认按下”行为。此答案由 Safari Technologies Evangelist Vicki Murley over here 提供（需要注册）

我在您的 stackoverflow 帖子中看到你说你的最终目标是：

"我们从不想要默认值 MobileSafari Press 的“复制”行为图片”或选择文字。”

这些行为可以在 CSS 中禁用（+ 一项奖励属性，因为人经常想关掉高光如果他们关闭其他行为）：
/* behavior */
-webkit-user-select: none;                /* disable cut copy paste */
-webkit-touch-callout: none;              /* disable callout, image save panel */
-webkit-tap-highlight-color: transparent; /* "turn off" link highlight */

评论：我们假设 Safari 的 Press 行为是基于事件的，而不是由 CSS 驱动的。调用 preventDefault ontouchstart 确实会取消按下行为（这确实是导致我们误入歧途的原因），但这似乎是一个意外的副作用。确实，Mobile Safari 不像“CSS on press”那样执行“按下事件”。

使用 CSS 禁用 Press 行为使我们能够再次仅在我们真正需要的地方和时间调用 preventDefault。

【讨论】：

【解决方案2】：

丑陋的可能性：不要阻止按下 - 让默认按下不做任何事情。尝试使用可以捕获所有触摸并且不会阻止 touchstart 上的任何内容的玻璃窗格 div。

Divs 确实有默认的 Press 行为（某种选择），但也许可以关闭，不是通过 preventDevault 而是通过<body style="-webkit-user-select:none">？ ref

这意味着我们必须进行自己的命中测试以确定将我们识别的事件传递给哪些 DOM 节点，因为我们不能让事件在 DOM 祖先链中冒泡。

【讨论】：