javascript - MobileSafari 的正确触摸按钮行为

标签 javascript ios safari webkit mobile-safari

MobileSafari 通常具有不正确的 HTML 按钮行为(不正确的含义:“不像 iOS native 按钮”)。正确的按钮行为如下:

  • 用户触摸按钮:按钮高亮显示
  • 用户将手指拖出按钮:按钮变暗
  • 用户将手指拖回按钮:按钮高亮
  • 用户将手指拖出按钮并松开:按钮没有点击

MobileSafari 按钮在您触摸时高亮显示,无论您移动到哪里都保持高亮显示,无论您在何处松开它们都可以单击(除非 View 滚动,在这种情况下触摸总是被取消,即使您重新输入按钮也是如此).

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

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

最佳答案

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

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

Live JSFiddle DEMO

在您的 iOS 设备(也许还有您的 Android 设备??)上尝试一下。

- 布赖恩

关于javascript - MobileSafari 的正确触摸按钮行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8898477/

相关文章:

Javascript单选按钮组点击

javascript - 主干 - 管理应用程序 View

ios - Swift 中从子级到父级的调用函数

ios - 如何使用 Swift JSONDecoder 解码可以是数组或单个对象的 JSON 属性?

ios - prepareforsegue 方法抛出异常

http - Safari 移动版和桌面版隐藏了完整的引用 URL : why?

javascript - Chrome 的 JavaScript 控制台在评估对象方面是否懒惰?

javascript - 控制台上没有错误,使小圆圈在刷新时改变颜色

html - Safari 9 中的子框未垂直居中

HTML5 占位符在焦点上消失