jQuery 用于触摸设备的文档 .click 功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11397028/
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
document .click function for touch device
提问by Doidgey
I've got a sub-nav that works using jquery - A user clicks on the top level list item, for instance 'services' which triggers the dropdown. The dropdown toggles via clicking the 'service' link. I've made it so a user can click anywhere on the screen to toggle the dropdown to a closed state. But as the site is responsive i want the user to be able to click (touch) anywhere on the screen to close the dropdown but my problem is that it's not working on the touch devices.
我有一个使用 jquery 工作的子导航 - 用户单击顶级列表项，例如触发下拉列表的“服务”。单击“服务”链接可切换下拉菜单。我已经做到了，因此用户可以单击屏幕上的任意位置将下拉列表切换到关闭状态。但是由于该站点具有响应性，我希望用户能够单击（触摸）屏幕上的任何位置以关闭下拉列表，但我的问题是它在触摸设备上不起作用。
My code ive setup for the document click is:
我为文档点击设置的代码是：
$(document).click(function(event) {
if ( $(".children").is(":visible")) {
$("ul.children").slideUp('slow');
}
});
I'm assuming document.click might not work on touch devices, and if not, what work-around is there to achieve the same effect?
我假设 document.click 可能不适用于触摸设备，如果不是，有什么解决方法可以达到相同的效果？
Thanks
谢谢
回答by Fenton
To trigger the function with click or touch, you could change this:
要通过单击或触摸触发功能，您可以更改此设置：
$(document).click( function () {
To this:
对此：
$(document).on('click touchstart', function () {
Or this:
或这个：
$(document).on('click touch', function () {
The touchstartevent fires as soon as an element is touched, the touchevent is more like a "tap", i.e. a single contact on the surface. You should really try each of these to see what works best for you. On some devices, touchcan be a little harder to trigger (which may be a good or bad thing - it prevents a drag being counted, but an accidental small drag may cause it to not be fired).
该touchstart事件触发一旦元件被触摸时，touch事件更像是“抽头”，即在表面上的单一接触。您真的应该尝试其中的每一个，看看哪种最适合您。在某些设备上，touch触发可能有点困难（这可能是好事也可能是坏事 - 它可以防止计算阻力，但意外的小阻力可能会导致它不会被触发）。
回答by ale
touchstart or touchend are not good, because if you scroll the page, the device do stuff. So, if I want close a window with tap or click outside the element, and scroll the window, I've done:
touchstart 或 touchend 不好，因为如果你滚动页面，设备会做一些事情。因此，如果我想通过在元素外部点击或单击来关闭窗口，然后滚动窗口，我已经完成了：
$(document).on('touchstart', function() {
documentClick = true;
});
$(document).on('touchmove', function() {
documentClick = false;
});
$(document).on('click touchend', function(event) {
if (event.type == "click") documentClick = true;
if (documentClick){
doStuff();
}
});
回答by SSA
can you use jqTouchor jquery mobile ? there it's much easier to handle touch events. If not then you need to simulate click on touch device, follow this articles:
你可以使用jqTouch或jquery mobile吗？在那里处理触摸事件要容易得多。如果没有，那么您需要模拟点击触摸设备，请遵循以下文章：
iphone-touch-events-in-javascript
回答by Aaron Shier
As stated above, using 'click touchstart'will get the desired result. If you console.log(e)your clicks though, you may find that when jquery recognizes touch as a click - you will get 2 actions from click and touchstart. The solution bellow worked for me.
如上所述，使用'click touchstart'将获得所需的结果。如果console.log(e)您点击了，您可能会发现当 jquery 将触摸识别为点击时 - 您将从 click 和 touchstart 中获得 2 个动作。下面的解决方案对我有用。
//if its a mobile device use 'touchstart'
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
deviceEventType = 'touchstart'
} else {
//If its not a mobile device use 'click'
deviceEventType = 'click'
}
$(document).on(specialEventType, function(e){
//code here
});
回答by ayyp
To apply it everywhere, you could do something like
要将它应用到任何地方，您可以执行以下操作
$('body').on('click', function() {
if($('.children').is(':visible')) {
$('ul.children').slideUp('slow');
}
});回答by kofifus
the approved answer does not include the essential return false to prevent touchstart from calling click if click is implemented which will result in running the handler twoce.
批准的答案不包括必要的 return false 以防止 touchstart 在实现 click 时调用 click，这将导致运行处理程序两次。
do:
做：
$(btn).on('click touchstart', e => {
your code ...
return false;
});
