当用户触摸iPhone上的HTML元素时，我该如何反应？

Question

我正在使用UIWebView在我的iPhone应用程序中显示一些HTML内容。 我有一个图像链接，我希望它在用户触摸时更改 - 在用户将手指放在屏幕上的那一刻，而不是等到他们将手指抬起来。

什么CSS或JavaScript概念可以实现这一目标？ 我已经看过CSS中的hover和active状态，但它们似乎并不是我所追求的： hover与触摸相关而不是触及，而active似乎根本没有效果。

Answer 1

你可以试试这个。

我认为它应该是你要找的！

http://articles.sitepoint.com/article/iphone-development-12-tips/2

8：触摸事件

当然，你用手指而不是鼠标来使用你的iPhone; 点击，而不是点击。 更重要的是，您可以使用多个手指触摸和点按。 在iPhone上，鼠标事件被触摸事件取代。 他们是：

• touchstart
• touchend
• touchmove
• touchcancel （当系统取消触摸时）

当您订阅任何这些事件时，您的事件侦听器将收到一个事件对象。 事件对象具有一些重要属性，例如：

• touches - 触摸对象的集合，每个手指触摸屏幕一个。 例如，触摸对象具有包含页面内触摸坐标的pageX和pageY属性。
• targetTouches - 像触摸一样工作，但只注册目标元素而不是整个页面。

下一个示例是拖放的简单实现。 让我们在空白页面上放一个框并拖动它。 您需要做的就是订阅touchmove事件并在手指移动时更新框的位置，如下所示：

 window.addEventListener('load', function() { var b = document.getElementById('box'), xbox = b.offsetWidth / 2, // half the box width ybox = b.offsetHeight / 2, // half the box height bstyle = b.style; // cached access to the style object b.addEventListener('touchmove', function(event) { event.preventDefault(); // the default behaviour is scrolling bstyle.left = event.targetTouches[0].pageX - xbox + 'px'; bstyle.top = event.targetTouches[0].pageY - ybox + 'px'; }, false); }, false); 

touchmove事件侦听器首先取消手指移动的默认行为 - 否则Safari将滚动页面。 集合event.targetTouches包含当前目标div元素上每个手指的数据列表。
我们只关心一根手指，所以我们使用event.targetTouches[0] 。 然后pageX给我们手指的X坐标。 从这个值我们减去div宽度的一半，使手指停留在盒子的中心。

希望能帮助到你！

Answer 2

尝试使用Javascript“onMouseDown”，希望移动版Safari能够启动该事件。

<a href="#any_URL" onMouseDown="callSomeFunction();return true;">Link</a>