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>

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

2 个答案: