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

时间:2012-01-17 16:50:31

标签: javascript ios safari webkit mobile-safari

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

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

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

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

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

1 个答案:

答案 0 :(得分:1)

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

我构建了一个基本的JSFiddle,它实现了一些准系统功能。如果你知道任何javascript,我想你会明白的。

Live JSFiddle DEMO

在您的iOS设备上试试(也许是您的Android设备?)。

- 布赖恩