Question

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

我有一个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/

Answer 1

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

请参阅：https://developer.mozilla.org/en-US/docs/DOM/Touch_events

使用touchstart的示例：http://jsfiddle.net/R4pey/7/。

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

另请注意，您通常应独立于标记（而非内联）绑定事件，以实现标记和脚本的清晰分离。

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

Answer 2

查看以下链接，了解更快，更快速的按钮： https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE&csw=1

Answer 3

实施touchend事件处理程序

与点击和 touchstart 不同， touchend 会立即触发，而不会延迟300毫秒。如果您正在开发基于触控的WebGL或基于画布的游戏，这可能是实用的，但是，您不能仅仅依赖于标准网页中的touchend。

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

    //code here...

});

Answer 4

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

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

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

请参阅： http://roman.tao.at/dev/mobile-safari-memory-usage-with-images/

iPad上的点击事件响应缓慢

4 个答案: