所以,最近我一直在开发一个网站,让我改进并做出响应,我遇到的一个问题是有许多可点击的元素,混合在一起悬停状态的 CSS 和 jQuery 效果。
现在,首先我希望所有这些悬停状态都是 CSS,但我遇到的主要问题是在这些悬停状态下,某些元素正在改变 display
和 可见性
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/ 如果您点击其中一个 block ,您会看到它显示悬停状态,然后您需要再次点击才能真正触发点击事件。
这似乎发生在隐藏元素时,然后悬停状态显示该元素。
最佳答案
看来我找到了解决办法。
https://github.com/ftlabs/fastclick
FastClick 修复了这个问题,并消除了某些移动浏览器的 300 毫秒延迟问题。
只需将库包含在 <script>
中标记,然后使用 jQuery 或任何您喜欢的方式启动它:
$(document).ready(function() {
FastClick.attach(document.body);
});
简单解释一下为什么会出现这个问题:
当一个元素被隐藏时,例如当它具有以下任何一个 CSS 属性时:
display: none;
opacity: 0;
visibility: hidden;
然后隐藏元素的悬停状态显示元素,iOS 不会在第一次触摸时触发点击事件,它强制悬停状态(显示元素)。然后,用户需要再次触摸该元素才能触发点击事件。
我知道为什么要添加这个,但我想我宁愿 iOS 不这样做,这样开发人员只需要定制他们的网站,不要隐藏可能很重要的内容。
关于javascript - 禁用双击以单击触摸屏 iOS 设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33922957/