15

我做了一个照片概念的演示,它在两张图像之间切换以显示它们之间的差异。

我有一个工作正常的 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/

4

4 回答 4

15

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

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

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

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

另请注意,您通常应该独立于标记(而不是内联)绑定事件,以实现标记和脚本的更清晰分离。

这是一个使用 jQuery 的示例,它将事件与标记分开绑定,并同时处理clicktouchstart事件。在 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(); 
});
于 2012-09-14T01:47:24.887 回答
2

实现 touchend 事件处理程序

clicktouchstart不同,touchend事件会立即触发,没有 300 毫秒的延迟。如果您正在开发仅触控的 WebGL 或基于画布的游戏,这可能很实用,但是,您不能仅依赖标准网页中的 touchend。

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

    //code here...

});
于 2014-10-24T04:39:02.267 回答
2

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

于 2013-11-14T14:27:48.190 回答
0

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

附加的单击事件工作正常,但响应很慢,因为 Safari 似乎忙于处理图像(不断重绘)。

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

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

于 2012-09-14T02:17:23.587 回答