Question

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

目标：为按和点击提供自定义事件处理程序的技术，但不 Pinch < / em>（缩放）或拖动（滚动/平移）。我们希望为Press提供自定义行为，但让Safari仍然可以处理滚动/平移/缩放。

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

Drag是最简单的示例，但我们也关心获取Pinch和Double-tap的默认行为。我们从不想要“复制图像”的默认MobileSafari按行为或选择文本。

到目前为止的尝试：

保存ontouchstart事件，并在timeout之后，稍后调用preventDefault（就在识别Press之前）。没效果。

听取“oncontextmenu”。不，默认的新闻行为不会通过此事件发出信号或路由。

防止所有ontouch *处理程序中的默认值，然后当我们识别拖动/捏合手势时，使用initTouchEvent和/或initGestureEvent模拟新事件。以编程方式创建的事件命中了所有我们的回调，但Safari似乎没有注意它们，没有触发默认行为。

以虚假的举动打破Safari的新闻识别。 Safari在最轻微的移动中取消了一次按下，但我们允许稍微倾斜。在ontouchstart之后模拟移动事件（如上所述）不会导致Safari无法识别按下如果手指没有“真实地”移动。

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

我们不需要代码;我们正在寻找任何理论解决方案（除了“只是自己实现平移/缩放”，但如果你有一种光滑的方式来做我们感兴趣的话），这将导致合理的成功。我们也有兴趣了解其他类似的尝试 - 我们肯定不是第一个尝试这个的人吗？

替代TL; DR：除了在touchstart中，有什么方法可以阻止默认按下（也称为“点击并保持”）？

Answer 1

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

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

“我们从不想要默认   MobileSafari新闻行为的“复制   图像“或选择文字。”

可以在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的新闻行为是基于事件的，不是由CSS驱动的。调用preventDefault ontouchstart确实会取消新闻行为（这导致我们误入歧途，真的如此），但这似乎是一种意想不到的副作用。实际上，Mobile Safari并没有像“新闻中的CSS”那样执行“新闻事件”。

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

Answer 2

丑陋的可能性：不要阻止新闻 - 默认按下什么也不做。尝试使用玻璃窗格div来捕捉所有触摸并且不会阻止触摸开始的任何事情。

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

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

防止默认按iOS而不是默认拖动iOS MobileSafari？

2 个答案: