适用于MobileSafari的正确触摸按钮行为 [英] Proper touch button behavior for MobileSafari

问题描述

MobileSafari通常具有不正确的HTML按钮行为（错误含义：不像iOS本机按钮）。正确的按钮行为如下：

MobileSafari as a rule has incorrect HTML button behavior (incorrect meaning: "not like an iOS native button"). Correct button behavior is as follows:

• 用户触摸按钮：按钮高亮显示


• 用户拖出手指按钮：按钮调暗


• 用户将手指拖回按钮：按钮高亮显示


• 用户将手指拖出按钮并释放：按钮确实不要点击

• User touches button: Button highlights
• User drags finger out of button: Button dims
• User drags finger back into button: Button highlights
• User drags finger out of button and releases: Button does not click

当您触摸它们时，MobileSafari按钮会突出显示，无论您在何处移动都会保持突出显示，并且无论在何处都单击你释放它们（除非视图滚动，在这种情况下触摸总是被取消，即使你重新进入按钮）。

MobileSafari buttons highlight when you touch them, stay highlighted no matter where you move, and click no matter where you release them (unless the view scrolls, in which case the touch is always canceled, even if you re-enter the button).

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

This problem applies to all clickable things such as links (when -webkit-touch-callout is set to none). I have only found one web application so far that has correct button behavior: Facebook. Looking at their code for it, it looks like they've done quite a lot of jumping-through-hoops to make it work correctly (tracking all the mouse events manually and not using buttons at all). The code is dense, uses Javelin, and I'm not yet clear on all the pieces required to make it work.

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

I know I'm somewhat kidding myself (since if it were easy, everyone would do it), but I'm going to ask anyway. Is there any generally-available piece of code that handles this feature? Is there a simpler solution than reverse engineering Javelin, even if it is only applicable to WebKit? (Javelin isn't very-well suited to my lightweight needs.) My ultimate goal is correct button behavior for a UIWebView embedded in a native app, so hybrid JavaScript/ObjC solutions are acceptable as well (though no hybrid approaches come to mind).

推荐答案

基本上你想要做的就是建立用于触摸设备的某种混合悬停功能，可检测手指移入/移出相关按钮的时间。

Basically what you'd want to do is build out some sort of hybrid hover functionality for touch devices, which detects when your finger moves in/out of the button in question.

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

I built a basic JSFiddle which implements some barebones functionality. If you know any javascript, I think you'll get the idea.

Live JSFiddle DEMO

在你的iOS设备（也许是你的Android设备上）上试试吧。

Try it on your iOS device (and maybe your Android device??).

-
brian

- brian

这篇关于适用于MobileSafari的正确触摸按钮行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！