我制作了一个照片概念演示,可以在两张图片之间切换以显示它们之间的差异。
我有一个 onMouseClick 事件可以正常工作,但在 iPad 上除外。响应在我的台式机上是即时的,但在平板电脑上却很延迟,大概 500 毫秒?
这正常吗?还有其他方法可以处理这个问题吗?
Javascript:
var img1 = new Image();
img1.src = "http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg";
var img2 = new Image();
img2.src = "http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg";
function test() {
if (document.pic.src == 'http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg') {
document.pic.src = 'http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg';
}
else if (document.pic.src == 'http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg') {
document.pic.src = 'http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg';
}
}
正文:
<div>
<table id="table-1" >
<tr><td>
<img id="img" src="http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg" name="pic" onMouseDown="test()"/>
<img id="png1" src="http://www.thedigitaltrekker.com/wp-content/uploads/2012/03/logo-6smA.png"/>
Click on the image above to toggle between 19mm and 200mm <br>
</td></tr>
</table>
</div>
同样在 jsfiddle 上:http://jsfiddle.net/ntmw/R4pey/5/
最佳答案
iOS 有意延迟点击事件,以便手势/滑动正常工作。例如,当您触摸一个元素时,您可能意味着滚动整个页面,而不是触发元素上的点击事件。要实现更细粒度的控制,请使用触摸事件。
参见:https://developer.mozilla.org/en-US/docs/DOM/Touch_events
使用 touchstart
的示例:http://jsfiddle.net/R4pey/7/ .
请注意,捕获触摸事件会产生后果,例如您可以覆盖用户期望的行为(例如滑动)。
另请注意,您通常应该独立于标记(而不是内联)绑定(bind)事件,以实现标记和脚本的更清晰分离。
Here's an example使用 jQuery 将事件与标记分开,并处理 click
和 touchstart
事件。在 Chrome 21、FF 15、IE9 和 iPad 3 上测试。
var url1 = "http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg";
var url2 = "http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg";
// preload from original code
var img1 = new Image();
img1.src = url1;
var img2 = new Image();
img2.src = url2;
// bind the click and touchstart events
$("#img").on("click touchstart", function(e){
if (this.src == url1) {
this.src = url2;
}
else if (this.src == url2) {
this.src = url1;
}
// When touch event fires, this is needed to prevent the click
// event from firing as well as @RyanWheale noted in the comments.
e.preventDefault();
});
关于javascript - iPad 上点击事件响应缓慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12417085/