javascript iPad上点击事件响应缓慢
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12417085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slow response to click event on iPad
提问by ntmw
I made a demo of a photo concept that toggles between two images to show a difference between between them.
我制作了一个照片概念演示，可以在两个图像之间切换以显示它们之间的差异。
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?
我有一个运行良好的 onMouseClick 事件，但在 iPad 上除外。响应在我的桌面上是即时的，但在平板电脑上却很延迟，可能是 500 毫秒？
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';
}
}?
Body:
身体：
<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>
?
Also on jsfiddle: http://jsfiddle.net/ntmw/R4pey/5/
同样在 jsfiddle：http: //jsfiddle.net/ntmw/R4pey/5/
采纳答案by Tim Medora
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.
iOS 有意延迟点击事件，以便手势/滑动正常工作。例如，当您触摸一个元素时，您可能想要滚动整个页面，而不是在元素上触发 click 事件。要实现更细粒度的控制，请使用触摸事件。
See: https://developer.mozilla.org/en-US/docs/DOM/Touch_events
请参阅：https: //developer.mozilla.org/en-US/docs/DOM/Touch_events
Example using touchstart: http://jsfiddle.net/R4pey/7/.
使用示例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.
另请注意，您通常应该独立于标记（而非内联）绑定事件，以实现标记和脚本的更清晰分离。
Here's an exampleusing jQuery which binds the events separate from the markup, and handles both clickand touchstartevents. Tested in Chrome 21, FF 15, IE9, and on the iPad 3.
这是一个使用 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();
});
回答by amolp1709
check out the following link for the faster and responsive buttons: https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE&csw=1
查看以下链接以获取更快且响应迅速的按钮：https: //developers.google.com/mobile/articles/fast_buttons?hl=de-DE&csw=1
回答by mpalencia
Implement touchend Event Handlers
实现 touchend 事件处理程序
Unlike clickand touchstart, touchendevents are fired instantly without a 300ms delay. This may be practical if you're developing a touch-only WebGL or canvas-based game, however, you cannot rely solely on touchend in standard web pages.
与click和touchstart不同，touchend事件会立即触发，没有 300 毫秒的延迟。如果您正在开发仅限触摸的 WebGL 或基于画布的游戏，这可能很实用，但是，您不能在标准网页中仅依赖于 touchend。
$('#id').on('touchstart',function(e) {
//code here...
});
回答by Codebeat
I have experienced some problems with images on IOS devices. For example I use HTML5 gradients and shadows (also images) on my site and noticed a huge response difference when removing the images.
我在 IOS 设备上遇到了一些图像问题。例如，我在我的网站上使用 HTML5 渐变和阴影（还有图像），并注意到删除图像时的巨大响应差异。
The attached click event is working fine but response is slow because Safari seems to busy with the images (redrawing it constantly).
附加的点击事件工作正常，但响应缓慢，因为 Safari 似乎忙于处理图像（不断重绘）。
I used an iPad3 to test it. A guy has written an interesting article about the image problems on IOS.
我用 iPad3 来测试它。一个家伙在IOS上写了一篇关于图像问题的有趣文章。
See: http://roman.tao.at/dev/mobile-safari-memory-usage-with-images/
请参阅：http: //roman.tao.at/dev/mobile-safari-memory-usage-with-images/
