对iPad上的点击事件反应迟钝 [英] Slow response to click event on iPad

问题描述

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

I made a demo of a photo concept that toggles between two images to show a difference between between them.

我有一个onMouseClick事件可以正常工作，除了在iPad上。我的桌面上的响应是即时的，但在平板电脑上却相当延迟，可能是500毫秒？

I've got an onMouseClick event that works fine, except on the iPad. The response is instant on my desktop, but is quite delayed on the tablet, maybe 500ms?

这是正常的吗？还有其他方法可以解决这个问题吗？

Is this normal? Is there another way I can handle this?

Javascript：

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/

Also on jsfiddle: http://jsfiddle.net/ntmw/R4pey/5/

推荐答案

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

iOS purposefully delays click events so that gestures/swiping work correctly. For example, when you touch an element you might mean to scroll the whole page, not fire the click event on an element. To achieve finer-grained control, use touch events.

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

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

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

Note that capturing touch events has consequences, e.g. you may override a behavior that the user expects (like swiping).

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

Also note that you should usually bind your events independently of your markup (not inline) to achieve a cleaner separation of markup and script.

这是一个例子使用jQuery将事件与标记分开绑定，并处理点击和 touchstart 事件。在Chrome 21，FF 15，IE9和iPad 3上测试。

Here's an example using jQuery which binds the events separate from the markup, and handles both click and touchstart events. Tested in Chrome 21, FF 15, IE9, and on the 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(); 
});

这篇关于对iPad上的点击事件反应迟钝的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！