适用于MobileSafari的正确触摸按钮行为

Question

MobileSafari通常具有不正确的HTML按钮行为(不正确的含义:"不像iOS本机按钮").正确的按钮行为如下:

• 用户触摸按钮:按钮高亮显示
• 用户将手指拖出按钮:按钮变暗
• 用户将手指拖回按钮:按钮高亮显示
• 用户将手指拖出按钮并释放:按钮未单击

MobileSafari按钮在您触摸时突出显示,无论您在何处移动都会保持突出显示,无论您在何处释放它们都会点击(除非视图滚动,在这种情况下,即使您重新进入按钮,触摸也始终被取消).

此问题适用于所有可点击的内容,例如链接(-webkit-touch-callout设置为时none).到目前为止,我只发现了一个具有正确按钮行为的Web应用程序:Facebook.看看他们的代码,看起来他们已经完成了很多跳跃式操作以使其正常工作(手动跟踪所有鼠标事件而根本不使用按钮).代码密集,使用Javelin,我还不清楚使其工作所需的所有部分.

我知道我有点开玩笑(因为如果这很容易,每个人都会这样做),但无论如何我都会问.是否有任何通用的代码可以处理此功能？有没有比逆向工程Javelin更简单的解决方案,即使它只适用于WebKit？(Javelin不太适合我的轻量级需求.)我的最终目标是UIWebView在本机应用程序中嵌入正确的按钮行为,因此混合JavaScript/ObjC解决方案也是可以接受的(虽然没有想到混合方法).

Answer 1

基本上，您想要做的是为触摸设备构建某种混合悬停功能，该功能可以检测您的手指移入/移出相关按钮的时间。

我构建了一个基本的 JSFiddle，它实现了一些准系统功能。如果您了解 javascript，我想您就会明白。

现场 JSFiddle 演示

在您的 iOS 设备上尝试一下（也许您的 Android 设备？）。

- 布莱恩