2011-03-18 30 views
14

语境:在MobileSafari/iPad上的Web应用程序,无论是全屏和嵌入的iframe防止默认按下但不是默认在iOS MobileSafari中拖动?

目标:技术,提供自定义事件处理程序新闻点击 (放大)或拖动(滚动/平移)。我们希望为Press提供自定义行为,但让Safari仍然处理Scroll/Pan/Zoom。

问题:这两个目标似乎是相互排斥的。为了防止按手势的默认行为,必须立即响应ontouchstart调用event.preventDefault。但是,要让拖动的默认行为继续进行,我们必须在初始ontouchstart上调用event.preventDefault,而不是。一旦调用preventDefault,则在该手势序列期间无法获得默认行为(即直到所有手指脱落)。拖动不会被识别,直到发生一些移动。

拖动是最简单的例子,但我们关心的是获取捏和双击的默认行为。我们从不需要“复制图像”或选择文本的默认MobileSafari Press行为。

尝试迄今:

  • 保存ontouchstart事件,一个timeout后,再打的preventDefault它(新闻会被认可之前)。没有效果。
  • 收听'oncontextmenu'。不,默认的按下行为不会通过此事件发送或路由。
  • 防止我们的所有ontouch *处理程序中的默认设置,然后当我们识别到拖/捏手势时,使用initTouchEvent和/或initGestureEvent模拟新事件。以编程方式创建的事件碰到所有我们的回调,但Safari似乎没有注意到它们,触发了没有默认行为。
  • 用假动作破坏Safari的新闻人物识别。 Safari会稍微取消一次新闻发布,但我们允许有一点漏洞。在ontouchstart后不会导致Safari无法识别的情况下模拟移动事件(如上所述)如果手指没有移动到“真实”,则按此按钮。

我们拥有一套功能齐全的手势识别器(使用Javascript,ontouch *),其格式为Apple的native iOS gesture recognizers。我们在识别任何手势时没有任何问题,但我们不知道有什么好的方法来复制Safari免费提供的缩放/平移/双击行为。

我们不需要代码;我们正在寻找任何理论上的解决方案(除了“只是实现平移/缩放你自己”,尽管如果你有一个光滑的方式来做这个我们感兴趣的),这会导致合理的成功。我们也有兴趣了解其他类似的尝试做到这一点 - 当然,我们不可能是第一个尝试这个

替代TL; DR:有什么办法可以防止touchstart以外的默认Press(也称为轻击 - 保持)吗?

回答

19

成功:完全通过CSS而不是preventDefault防止“默认按下”行为。

“我们从来不想默认 MobileSafari出版社:这个答案是通过Safari浏览器技术传播者Vicki Murleyhere(需要注册)

我在你的计算器的职位, 你说你的最终目标是看提供“复制 图片”或选择文字的行为。“

这些行为在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禁止按下行为使我们能够再次调用preventDefault,只在实际需要的时间和地点。

0

丑陋的可能性:不要阻止按 - 使默认按下什么都不做。尝试使用能够捕捉所有触摸的玻璃面板div,并且不会阻止touchstart上的任何操作。

Divs有默认的按下行为(某种选择),但也许可以关闭,而不是通过preventDevault,但通过<body style="-webkit-user-select:none">ref

这意味着我们不得不做我们自己的命中测试来确定哪些DOM节点将我们识别的事件传递给我们,因为我们不能让事件冒泡到DOM祖先链。