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

Question

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

什么CSS或JavaScript概念可以实现这一目标？我看了看hover,并active在CSS中指出,但他们似乎并没有被后我什么: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宽度的一半,使手指停留在盒子的中心.

希望能帮助到你!