点击触摸设备的功能

我有一个子导航工程使用 jquery-一个用户点击顶层列表项目，例如’服务’，触发下拉列表。下拉菜单通过点击“服务”链接进行切换。我已经做到这一点，使用户可以点击屏幕上的任何地方，切换下拉到一个关闭的状态。但由于网站是响应的，我希望用户能够点击(触摸)在屏幕上的任何地方，以关闭下拉菜单，但我的问题是，它不工作的触摸设备。

我的文档点击代码设置是:

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


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


});

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

谢谢

198914 次浏览
小开

要将它应用到任何地方，你可以这样做

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

你能使用 JqTouch或者 Jquery 手机吗? 这样处理触摸事件就容易多了。 如果没有，那么你需要模拟点击触摸设备，按照这篇文章:

Iphone-touch-events-in-javascript

触摸演示

在这个线程中更多

小开
最佳答案

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

以前的答案曾经在那些认为点击很特别的浏览器中奏效过一段时间。它最初包括一个实际上从未标准化的“触摸”事件。

除非你有以下问题:

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

没有必要改变什么！

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

要通过点击或触摸来触发该功能，您可以更改如下:

$(document).click( function () {

这样说:

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

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

小开

Touch start 或 touch end 都不好，因为如果你滚动页面，设备会做一些事情。 因此，如果我想关闭一个窗口，点击或点击外面的元素，并滚动窗口，我已经做到了:

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

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

批准的答案不包括必要的返回 false，以防止触摸开始调用点击，如果点击是实现，这将导致运行两次处理程序。

做:

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

提交答案