触摸设备的文档.click功能 [英] document .click function for touch device

问题描述

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

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

  $ （document）.click（function（event）{
 
 if（$（。children）。is（：visible））{
 $（ul.children） .slideUp（'slow'）; 
} 
 
}）; 
  

我假设document.click可能无法在触摸设备上工作，

感谢

解决方案

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

  $（document）.click（function b $ b  

至此：

 code> $（document）.on（'click touchstart'，function（）{
  

<或者：

  $（document）.on（'click touch'，function（）{
  

touchstart 事件触发元素时触发元素， c $ c> touch 事件更像是一个tap，即表面上的单个联系人，你应该真的尝试每一个，看看什么最适合你。在一些设备上， touch 可能有点难以触发（这可能是一个好的或坏的事情 - 它防止拖累被计数，但意外的小拖曳可能会导致它不被触发）。

I've got a sub-nav that works using jquery - A user clicks on the top level list item, for instance 'services' which triggers the dropdown. The dropdown toggles via clicking the 'service' link. I've made it so a user can click anywhere on the screen to toggle the dropdown to a closed state. But as the site is responsive i want the user to be able to click (touch) anywhere on the screen to close the dropdown but my problem is that it's not working on the touch devices.

My code ive setup for the document click is:

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

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

});

I'm assuming document.click might not work on touch devices, and if not, what work-around is there to achieve the same effect?

Thanks

解决方案

To trigger the function with click or touch, you could change this:

$(document).click( function () {

To this:

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

Or this:

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

The touchstart event fires as soon as an element is touched, the touch event is more like a "tap", i.e. a single contact on the surface. You should really try each of these to see what works best for you. On some devices, touch can be a little harder to trigger (which may be a good or bad thing - it prevents a drag being counted, but an accidental small drag may cause it to not be fired).

这篇关于触摸设备的文档.click功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！