触控设备的文档点击功能答案

【问题标题】：document .click function for touch device触控设备的文档点击功能
【发布时间】：2012-07-08 23:14:11
【问题描述】：

我有一个使用 jquery 工作的子导航 - 用户单击顶级列表项，例如触发下拉列表的“服务”。下拉菜单通过单击“服务”链接进行切换。我已经做到了，因此用户可以单击屏幕上的任意位置以将下拉菜单切换到关闭状态。但是由于该站点具有响应性，我希望用户能够单击（触摸）屏幕上的任何位置以关闭下拉菜单，但我的问题是它不适用于触摸设备。

我为文档点击设置的代码是：

$(document).click(function(event) { 

  if ( $(".children").is(":visible")) {
    $("ul.children").slideUp('slow');
  }

});

我假设 document.click 可能无法在触摸设备上运行，如果不能，有什么解决方法可以达到相同的效果？

谢谢

【问题讨论】：

尝试将点击事件附加到$('html') 或$('body')。
只包含 cursor:pointer 它将工作 enter link description here 感谢:->

标签： jquery css

【解决方案1】：

更新！在现代浏览器中，点击事件会触发点击事件，因此您无需添加额外的touchstart 或touchend 事件，click 就足够了。

这个先前的答案曾一度适用于认为点击很特别的浏览器。它最初包含一个实际上从未标准化的“触摸”事件。

除非您有以下问题：

$(document).on('click', function () { ... });

没有必要改变任何东西！

以前的信息，更新删除touch...

要通过点击或触摸触发功能，您可以更改：

$(document).click( function () {

到这里：

$(document).on('click touchstart', function () {

touchstart 事件会在元素被触摸时立即触发，因此根据您的具体情况，使用touchend 可能更合适。

【讨论】：

可能 'touch' 比 'touchstart' 好。当然这取决于，但是 touchstart 可能会导致我们的应用程序出现奇怪的行为（例如，当我们显示弹出窗口时，在 touchstart 时将其关闭 - 然后触摸事件将传播到下面的元素）。
根据@Szorstki 的评论，也许可以将此答案更改为合并touch 代替touchstart。
在我的情况下，我发现“触摸”不起作用（通过点击其他地方关闭下拉菜单）。在我当前的 iPad 上点击文档不会触发触摸事件。只有 touchstart 完成了这项工作。
还有tap事件
我没有找到关于任何名为 touch 的 DOM 事件的官方文档。我能看到的只有 touchend、touchstart、touchcancel 和 touchmove。您能否@Fenton 参考一些确认此事件存在的文件。我的猜测是，在你的情况下它可以工作，因为你添加了点击和触摸，所以点击是实际使用的事件......？

【解决方案2】：

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();
    }
 });

【讨论】：

智能解决方案，ty
智能解决方案大师。谢谢
它被双重触发了。
多么好的解决方案，，，好样的

【解决方案3】：

你可以使用jqTouch 或jquery mobile 吗？在那里处理触摸事件要容易得多。如果没有那么你需要模拟点击触摸设备，请按照这篇文章：

iphone-touch-events-in-javascript

A touch demo

More in this thread

【讨论】：

【解决方案4】：

要将其应用到任何地方，您可以执行类似的操作

$('body').on('click', function() {
   if($('.children').is(':visible')) {
      $('ul.children').slideUp('slow');
   }
});

【讨论】：

我认为这可以正常工作，但是在 iphone / ipad 上它似乎不起作用。我正在研究 Jquery mobile，但我想避免将其添加到
@Mat-visual 查看.bind() 和.unbind() 的点击事件。我也遇到了同样的问题。
是的，我一直在看这些路线。我刚刚尝试了 $(document).bind('click', function() { - 但由于某种奇怪的原因仍然不走运。我一定遗漏了一些东西，也许是冲突。不过在普通 pc 浏览器上工作正常
@Mat-visual 我通过执行类似function bindTap() { $('element').bind("click", function(e){} ); $("element").click(function(){ //DO SOMETHING $("element").unbind("click"); }); } 的操作绕过它，然后在某处的点击事件上调用该函数。 iOS 上.click 的问题在于它解除了点击事件的绑定。
我想你肯定会做一些我会玩的东西，看看我能不能让它工作，谢谢，如果成功了我会告诉你的。

【解决方案5】：

如上所述，使用'click touchstart' 将获得所需的结果。如果您console.log(e) 您的点击，您可能会发现当 jquery 将触摸识别为点击时 - 您将从点击和 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
});

【讨论】：

有些桌面有触摸屏，所以不建议只绑定两个事件之一。

【解决方案6】：

批准的答案不包括必要的 return false 以防止 touchstart 在实现 click 时调用 click ，这将导致运行处理程序两次。

做：

$(btn).on('click touchstart', e => { 
   your code ...
   return false; 
});

【讨论】：