MobileSafari 的正确触摸按钮行为

Posted 2023-03-14

【中文标题】MobileSafari 的正确触摸按钮行为

【英文标题】：Proper touch button behavior for MobileSafari

【发布时间】：2012-01-17 16:50:31

【问题描述】：

MobileSafari 通常具有不正确的 html 按钮行为（错误含义：“不像 ios 原生按钮”）。正确的按钮行为如下：

用户触摸按钮：按钮突出显示 用户将手指拖出按钮：按钮变暗 用户将手指拖回按钮：按钮突出显示 用户将手指拖出按钮并释放：按钮

不点击

MobileSafari 按钮在您触摸它们时会突出显示，无论您移动到哪里都保持突出显示，并且无论您在哪里释放它们都单击（除非视图滚动，在这种情况下，触摸始终会被取消，即使您重新输入按钮也是如此)。

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

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

【参考方案1】：

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

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

Live JSFiddle DEMO

在您的 iOS 设备（也可能是您的 android 设备？？）上尝试一下。

- 布莱恩

【讨论】：

我尽量避免为我在这个特定应用程序中使用的一点点网络添加（和学习 :D）JQuery，但你的演示实际上非常棒。谢谢。我需要多玩一些，因为我发现它在 MobileSafari 中的行为有点古怪（有时它会在您认为它不会触发时触发，有时它不会完全正确地重置）。但是基础知识非常有趣。我不得不重新考虑避免使用 JQuery，因为我最近一直在与手写 JavaScript 作斗争。

是的，当您向上/向下滚动时有点不稳定。它当然不会涵盖所有边缘情况，但水平移入/移出按钮效果很好。学习 jQuery 的最佳方式实际上就是打开一个 JSFiddle 并开始使用 HTML 元素。