用于触控设备的文档.click功能

Question

我有一个使用jquery的子导航--用户点击顶层列表项，例如'services‘，它会触发下拉菜单。该下拉菜单可通过单击“service”链接进行切换。我已经做到了，这样用户就可以点击屏幕上的任何地方，将下拉菜单切换到关闭状态。但由于该网站是响应式的，我希望用户能够点击(触摸)屏幕上的任何位置来关闭下拉列表，但我的问题是它在触摸设备上不起作用。

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

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

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

});

我假设document.click可能不能在触摸设备上工作，如果不能，有什么解决方法可以达到同样的效果呢？

谢谢

Answer 1

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

之前的答案在一段时间内适用于那些认为点击是特别的浏览器。它最初包含一个实际上从未标准化的“触摸”事件。

除非您在以下方面遇到问题：

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

没有必要改变任何东西！

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

要通过点击或触摸来触发函数，您可以更改以下内容：

$(document).click( function () {

要这样做：

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

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

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