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

How can I react when a user touches an HTML element on an iPhone?

提问by Tommy Herbert

I'm displaying some HTML content in my iPhone app using a UIWebView. I have an image link, and I want it to change when the user touches it - at the moment the user puts a finger on the screen, rather than waiting until they lift their finger back off.

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

What CSS or JavaScript concept could accomplish this? I've looked at the hoverand activestates in CSS, but they don't seem to be what I'm after: hoverrelates to touch-up rather than touch-down, while activeseems to have no effect at all.

什么 CSS 或 JavaScript 概念可以实现这一点？我已经查看了CSS中的hover和active状态，但它们似乎不是我所追求的：hover与修饰而不是接触有关，而active似乎根本没有效果。

采纳答案by Allan Kimmer Jensen

You could try this.

你可以试试这个。

I think it should be what you are looking for!

我想这应该是你要找的！

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

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

8: Touch Events

Of course, you use your iPhone with a finger instead of a mouse; rather than clicking, you tap. What's more, you can use several fingers to touch and tap. On the iPhone, mouse events are replaced by touch events. They are:

• touchstart
• touchend
• touchmove
• touchcancel(when the system cancels the touch)

When you subscribe to any of those events, your event listener will receive an event object. The event object has some important properties, such as:

• touches— a collection of touch objects, one for each finger that touches the screen. The touch objects have, for example, pageX and pageY properties containing the coordinates of the touch within the page.
• targetTouches— works like touches, but only registers touches on a target element as opposed to the whole page.

The next example is a simple implementation of drag and drop. Let's put a box on a blank page and drag it around. All you need to do is subscribe to the touchmove event and update the position of the box as the finger moves around, like so:

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);

The touchmoveevent listener first cancels the default behavior of the finger move—otherwise Safari will scroll the page. The collection event.targetTouchescontains a list of data for each finger currently on the target div element.
We only care about one finger, so we use event.targetTouches[0]. Then pageXgives us the X coordinate of the finger. From this value we subtract half the width of the div so that the finger stays in the center of the box.

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 宽度的一半，以便手指停留在框的中心。

Hope it helps!

希望能帮助到你！

回答by Andrew M

Try the Javascript "onMouseDown", hopefully the mobile Safari will fire the event.

尝试使用 Javascript“onMouseDown”，希望移动版 Safari 会触发该事件。

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