[英]Slow response to click event on 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';
}
}
身体:
<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/
iOS有目的地延迟点击事件,以便手势/滑动正常工作。 例如,当您触摸元素时,您可能意味着滚动整个页面,而不是触发元素上的click事件。 要实现更精细的控制,请使用触摸事件。
请参阅: 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();
});
请查看以下链接,了解更快速,更快速的按钮: https : //developers.google.com/mobile/articles/fast_buttons?hl = de-DE&ccs = 1
实现touchend事件处理程序
与click和touchstart不同, touchend事件会在没有300ms延迟的情况下立即触发。 如果您正在开发基于触摸的WebGL或基于画布的游戏,这可能是实用的,但是,您不能仅仅依赖于标准网页中的touchend。
$('#id').on('touchstart',function(e) {
//code here...
});
我在IOS设备上遇到了一些图像问题。 例如,我在我的网站上使用HTML5渐变和阴影(也是图像),并在删除图像时注意到巨大的响应差异。
附加的点击事件工作正常,但响应很慢,因为Safari似乎忙于图像(不断重绘)。
我用iPad3来测试它。 一个人写了一篇关于IOS图像问题的有趣文章。
见: http : //roman.tao.at/dev/mobile-safari-memory-usage-with-images/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.