Javascript iPad上点击事件响应缓慢

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

我有一个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';
    }
}​

正文：

单击上面的图像在19毫米和200毫米之间切换

​

---

同样在JSFIDLE上：

iOS故意延迟点击事件，以便手势/刷卡正确工作。例如，当您触摸某个元素时，可能意味着滚动整个页面，而不是触发某个元素上的单击事件。要实现更细粒度的控制，请使用触摸事件

见：

使用touchstart的示例：

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

还要注意，通常应该独立于标记（而不是内联）绑定事件，以实现标记和脚本的更清晰分离

使用jQuery将事件与标记分开绑定，并处理

单击

和

触摸启动

事件。在Chrome 21、FF 15、IE9和iPad3上进行测试

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

---

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

附加的点击事件工作正常，但响应缓慢，因为Safari似乎忙于处理图像（不断重画）

我用iPad3来测试它。一个家伙写了一篇关于IOS上图像问题的有趣文章

见：

---

查看以下链接，了解更快、响应更快的按钮：

---

实现touchend事件处理程序

与点击和触摸启动不同，触摸结束事件会立即触发，不会延迟300毫秒。如果您正在开发一款仅限触摸的WebGL或基于画布的游戏，这可能是可行的，但是，您不能在标准网页中仅依赖touchend

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

    //code here...

});

---

这个答案是正确的，但我想指出的是，简单的解决方案是使用touchstart事件。但是，请注意，单击事件仍将在大约300毫秒后触发（至少在某些设备上，如Android）。如果初始触摸下的内容被新内容替换，新内容将收到“单击”事件。您看到我的更新了吗？我同意

touchstart

很可能是最好的解决方案。非常感谢各位。我没有使用jQuery的任何经验，但是Tim的回答让我能够轻松地使用这种方法。它也比我的更干净，更容易阅读：-）没问题。请注意，jQuery并不是实现此功能所必需的，但它使跨浏览器的事件绑定/处理变得更加容易（通常会生成更简洁的代码）。非常感谢@Tim Medora。你救了我@谢谢你的语法修正，没问题。谢谢你的回复。我不知道iOS设备有这样的问题。我签出了这篇文章，现在可能比我高一点，我会把它留到以后：-）看起来链接的文章不见了。

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

    //code here...

});