jQuery 如何在 iOS 设备上用 touchstart 替换点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18201361/
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
How to replace click with touchstart on iOS devices
提问by KalC
Objective
客观的
To close the parent div of an anchor tag when clicked. In the code below, I want to hide div performance_ttwhen the user clicks on anchor tag close_performance_tt.
单击时关闭锚标记的父 div。在下面的代码中，我想在用户点击锚标签close_performance_tt时隐藏 div performance_tt。
Problem
问题
Unable to get it to work on iOS devices after spending several hours at it. Works fine on everything else, even a BlackBerry 10 device.
花了几个小时后无法让它在 iOS 设备上工作。在其他所有设备上都能正常工作，甚至是 BlackBerry 10 设备。
<div id="performance_tt" style="display: none;width: 300px;height: 200;overflow: auto;padding: 5px;background-color: yellow;">
<div>Website performance has become an important consideration for most sites.
The speed of a website affects usage and user satisfaction, as well as search engine rankings, a factor that directly correlates to revenue and retention.
As a result, creating a system that is optimized for fast responses and low latency is key.</div>
<a id="close_performance_tt" href="#">Close</a>
<script>
var userAgent = navigator.userAgent.toLowerCase();
var isiOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
if (isiOS) {
$("#close_performance_tt").bind('touchstart', function() {
alert('Touch-start event triggered');
});
} else {
$("#close_performance_tt").bind('click', function() {
alert('Click event triggered');
});
}
</script>
</div>
回答by curly_brackets
Define a clickhandler that you can use later on:
定义一个稍后可以使用的点击处理程序：
var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");
$("a").bind(clickHandler, function(e) {
alert("clicked or tapped. This button used: " + clickHandler);
});
This will trigger click on non-touch devices and touchstart on touch devices.
这将触发非触摸设备上的点击和触摸设备上的 touchstart。
When that is said, I will strongly recommend using Fast clickinstead, and use regular click-events. With the above solution, you will trigger "touchstart" on links when you swipe on it to scroll the page for instance - which is not ideal.
话虽如此，我强烈建议改用快速点击，并使用常规点击事件。使用上述解决方案，例如，当您滑动链接以滚动页面时，您将在链接上触发“touchstart” - 这并不理想。
回答by BMH
In iOs atag is a clickable element, so touch on the link will trigger the mouse events (including click).
在 iOs 中a标签是一个可点击的元素，所以点击链接会触发鼠标事件（包括click）。
This code
这段代码
$("#close_performance_tt").bind('click',function() {
alert('Click event triggered');
});
will work fine on iOs.
将在 iO 上正常工作。
For more information: http://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
更多信息：http: //developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
回答by Sebastien Lorber
See http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
见http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
For iOS mouse events like click do not bubbe unless:
对于像单击这样的 iOS 鼠标事件，除非：
- The target element of the event is a link or a form field.
- The target element, or any of its ancestors up to but not including the , has an explicit event handler set for any of the mouse events. This event handler may be an empty function.
- The target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.
- 事件的目标元素是链接或表单域。
- 目标元素或其任何祖先元素（直到但不包括 ）具有为任何鼠标事件设置的显式事件处理程序。此事件处理程序可能是一个空函数。
- 目标元素或其任何祖先元素（直到并包括文档）都有一个 cursor: pointer CSS 声明。
The easiest solution for me is to apply cursor: pointereverywhere in case it is a iOS touch device. As there's no cursor it does not have any visual impact
对我来说，最简单的解决方案是适用于cursor: pointer任何地方，以防它是 iOS 触摸设备。由于没有光标，因此没有任何视觉冲击
