触摸设备的文档.click功能

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

我的文档单击代码设置为：

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

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

});

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

谢谢

要通过单击或触摸触发功能，您可以更改此设置：

$(document).click( function () {

对此：

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

或这个：

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

该touchstart事件在元素被触摸时立即触发，该touch事件更像是“轻击”，即表面上的单个接触。您应该真正尝试其中的每一种，以找出最适合您的方法。在某些设备上，touch触发起来可能会有些困难（这可能是好事，也可能是坏事-它阻止了阻力的计算，但是意外的阻力会导致其不被触发）。

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

可以使用jqTouch或jquery mobile吗？在那里处理触摸事件要容易得多。如果没有，那么您需要模拟触摸设备上的点击，请遵循以下文章：

iphone-touch-events-in-javascript

触摸演示

该线程中的更多内容

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

要将其应用于任何地方，您可以执行以下操作

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

批准的答案不包括必要的return false，以防止在实施点击的情况下touchstart调用click，这将导致运行处理程序twoce。

做：

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