MobileSafari 通常具有不正确的 HTML 按钮行为(不正确的含义:“不像 iOS native 按钮”)。正确的按钮行为如下:
- 用户触摸按钮:按钮高亮显示
- 用户将手指拖出按钮:按钮变暗
- 用户将手指拖回按钮:按钮高亮
- 用户将手指拖出按钮并松开:按钮没有点击
MobileSafari 按钮在您触摸时高亮显示,无论您移动到哪里都保持高亮显示,无论您在何处松开它们都可以单击(除非 View 滚动,在这种情况下触摸总是被取消,即使您重新输入按钮也是如此).
此问题适用于所有可点击的内容,例如链接(当 -webkit-touch-callout
设置为 none
时)。到目前为止,我只发现了一个具有正确按钮行为的 Web 应用程序:Facebook。查看他们的代码,看起来他们已经完成了很多跳转操作以使其正常工作(手动跟踪所有鼠标事件并且根本不使用按钮)。代码很密集,使用了 Javelin,我还不清楚让它工作所需的所有部分。
我知道我有点自欺欺人(因为如果这很容易,每个人都会这样做),但我还是要问。是否有处理此功能的任何通用代码?是否有比逆向工程 Javelin 更简单的解决方案,即使它仅适用于 WebKit? (Javelin 不太适合我的轻量级需求。)我的最终目标是为嵌入 native 应用程序的 UIWebView
提供正确的按钮行为,因此混合 JavaScript/ObjC 解决方案也是可以接受的(尽管没有想到混合方法)。
最佳答案
基本上您想要做的是为触摸设备构建某种混合悬停功能,它可以检测您的手指何时移入/移出相关按钮。
我构建了一个基本的 JSFiddle,它实现了一些准系统功能。如果您知道任何 javascript,我想您会明白的。
在您的 iOS 设备(也许还有您的 Android 设备??)上尝试一下。
- 布赖恩
关于javascript - MobileSafari 的正确触摸按钮行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8898477/