javascript – 禁用双击点击触摸屏iOS设备

2019年7月22日 194次阅读

所以,最近我一直在创建一个网站,让我改进并做出响应,我遇到的一个问题是有许多可点击的元素,混合使用CSS和悬停状态的jQuery效果.

现在,首先我更喜欢所有这些悬停状态都是CSS,但我遇到的主要问题是,在这些悬停状态下,某些元素正在改变显示和可见性css属性.我做了一些阅读,显然如果是这种情况,在触摸屏iOS设备上,这会导致第一次“触摸”强制悬停状态,然后需要第二次单击才能实际点击该元素.

我正在尝试找到一个不需要大量标记和样式更改的解决方案.优选地,利用jQuery / JavaScript的修复将是好的.

我尝试过以下方法：

$(document).ready(function() {
   $('a').on('click touchend', function(e) {
      var el = $(this);
      var link = el.attr('href');
      window.location = link;
   });
});

但是,当用户将手指放在可点击元素上时,这会出现问题,并拖动页面进行滚动.拖动后松开手指时,window.location仍会更改.

如果有必要,我稍后会添加一个jsFiddle.

提前致谢.

编辑：

这是一个显示问题的jsFiddle. http://jsfiddle.net/0bj3uxap/4/
如果您点击其中一个块,您将看到它显示悬停状态,然后您需要再次点击以实际触发点击事件.

当一个元素被隐藏,然后悬停状态显示该元素时,似乎会发生这种情况.

最佳答案 看起来我找到了解决方案.

https://github.com/ftlabs/fastclick

FastClick修复了此问题,并消除了某些移动浏览器的300毫秒延迟问题.

只需在< script>中包含该库即可.标签,然后使用jQuery或您喜欢的任何内容启动它：

$(document).ready(function() {
    FastClick.attach(document.body);
});

只是简单解释为什么会出现这个问题：

隐藏元素时,例如,当它具有以下任何一项的CSS属性时：

display: none;
opacity: 0;
visibility: hidden;

然后隐藏元素的悬停状态显示元素,iOS在第一次触摸时不触发click事件,它强制悬停状态(显示元素).然后,用户需要再次触摸该元素才能触发点击事件.

我知道为什么会添加这个,但我认为我宁愿iOS没有这样做,然后开发人员只需要定制他们的网站,不要隐藏那些至关重要的内容.

点赞