iPad上点击事件响应缓慢。

Question

iPad上点击事件响应缓慢。

javascriptipadonmouseover

16

我制作了一个照片概念的演示，可以在两个图像之间切换以展示它们之间的差异。

我的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/

- ntmw

4个回答

2

实现touchend事件处理程序

与click和touchstart不同，touchend事件会立即触发，没有300毫秒的延迟。如果你正在开发一个仅支持触摸操作的WebGL或基于canvas的游戏，这可能是实用的，但是在标准网页中不能仅依靠touchend。

$('#id').on('touchstart',function(e) {                

    //code here...

});

- mpalencia

2

请查看以下链接以获取更快速和响应式的按钮： https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE&csw=1

- amolp1709

1

似乎链接的文章已经消失了。 - Grant McLean

0

我在IOS设备上遇到了一些图片问题。例如，我在我的网站上使用HTML5渐变和阴影（也是图片），当我删除这些图片时，注意到响应差异很大。

附加的点击事件运行良好，但响应速度较慢，因为Safari似乎忙于处理图片（不断重绘它）。

我使用iPad3进行测试。有人写了一篇有趣的文章，讨论了IOS上的图像问题。

See: http://roman.tao.at/dev/mobile-safari-memory-usage-with-images/

- Codebeat

@ntmw：感谢您修正语法。 - Codebeat

没问题。谢谢回复。我不知道iOS设备有这样的问题。我看了一下那篇文章，可能对我来说有点高深，我会保存起来以后再看 :-) - ntmw

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim M. · Accepted Answer

iOS有意延迟点击事件以确保手势/滑动操作正确执行。例如，当您触摸一个元素时，您可能意味着滚动整个页面，而不是在元素上触发点击事件。要实现更精细的控制，请使用触摸事件。

参见：https://developer.mozilla.org/en-US/docs/DOM/Touch_events 使用touchstart的示例：http://jsfiddle.net/R4pey/7/。

请注意，捕获触摸事件会产生后果，例如，您可能会覆盖用户期望的行为（如滑动）。

还要注意的是，通常应将事件与标记分开绑定（而不是内联），以实现更清晰的标记和脚本分离。这里有一个示例使用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(); 
});