70

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

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

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

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

});

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

谢谢

4

6 回答 6

171

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

这个先前的答案在认为点击很特别的浏览器中工作了一段时间。它最初包括一个实际上从未标准化的“触摸”事件。

除非你有以下问题：

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

没有必要改变任何东西！

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

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

$(document).click( function () {

对此：

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

touchstart一旦元素被触摸，该事件就会触发，因此touchend根据您的情况使用它可能更合适。

于 2012-07-09T15:21:05.490 回答
52

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();
    }
 });
于 2014-09-08T15:16:10.677 回答
4

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

iphone-touch-events-in-javascript

触摸演示

更多在这个线程

于 2012-07-09T14:52:02.917 回答
2

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

$('body').on('click', function() {
   if($('.children').is(':visible')) {
      $('ul.children').slideUp('slow');
   }
});
于 2012-07-09T14:43:33.477 回答
2

如上所述，使用'click touchstart'将获得所需的结果。但是，如果console.log(e)您单击，您可能会发现当 jquery 将触摸识别为单击时-您将从单击和触摸启动中获得 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
});
于 2018-01-10T20:03:08.733 回答
1

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

做：

$(btn).on('click touchstart', e => { 
   your code ...
   return false; 
});
于 2019-03-20T05:26:20.287 回答