javascript – 适用于MobileSafari的触摸按钮行为

前端之家收集整理的这篇文章主要介绍了javascript – 适用于MobileSafari的触摸按钮行为前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
MobileSafari通常具有不正确的 HTML按钮行为(不正确的含义:“不像iOS本机按钮”).正确的按钮行为如下:

>用户触摸按钮:按钮亮点
用户将手指拖出按钮:按钮变暗
>用户将手指拖回按钮:按钮亮点
>用户将手指拖出按钮并释放:按钮不会点击

当您触摸它们时,MobileSafari按钮会突出显示,无论您移动的位置都保持突出显示,并且无论您放在哪里,都可以点击(除非视图滚动,否则触摸始终被取消,即使您重新进入按钮).

此问题适用于所有可点击的事情,如链接(-webkit-touch-callout设置为无).到目前为止,我只找到一个具有正确按钮行为的Web应用程序:Facebook.看看他们的代码,看起来他们已经做了很多跳过环,使其正常工作(手动跟踪所有的鼠标事件,而不是使用按钮).代码密集,使用标枪,我还不清楚所有要使其工作的部件.

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

解决方法

基本上你想要做的是为触摸设备构建一些混合悬停功能,它检测你的手指何时移动/移出所关心的按钮.

我构建了一个基本的JSFiddle,它实现了一些准系统的功能.如果你知道任何javascript,我想你会得到这个想法.

Live JSFiddle DEMO

尝试在您的iOS设备(也许您的Android设备)上.

– 布赖恩

猜你在找的JavaScript相关文章