Question

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

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

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

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

});

我假设document.click可能无法在触控设备上运行，如果没有，有什么办法可以达到同样的效果？

由于

Answer 1

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

$(document).click( function () {

对此：

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

或者这个：

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

touchstart事件会在触摸元素时触发，touch事件更像是“点击”，即表面上的单个触点。你应该真的尝试每一个，看看什么最适合你。在某些设备上，touch可能有点难以触发（这可能是好事或坏事 - 它可以防止拖动被计算，但意外的小阻力可能导致它不会被触发）。

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

Answer 3

可以使用jqTouch或jquery mobile 吗？在那里处理触摸事件要容易得多。如果没有，则需要模拟点击触控设备，请按照以下文章进行操作：

iphone-touch-events-in-javascript

A touch demo

More in this thread

Answer 4

要在任何地方应用它，您可以执行类似

的操作

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

Answer 5

如上所述，使用'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
});

Answer 6

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

这样做：

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

触摸设备的文档.click功能

6 个答案: