xinconan / blog

闲谈
7 stars 0 forks source link

解决a标签加了hover效果在ios中需要点击两次才能跳转问题 #14

Open xinconan opened 6 years ago

xinconan commented 6 years ago

今天测试提了个bug,a标签加了hover效果在ios中需要点击两次才能跳转。

之前做的项目主要以移动端为主,而这次做的官网主要以PC端为主,适配移动端。

在移动端基本都会使用 FastClick 解决移动端300ms延时问题。

这里我们可以使用绑定事件方式来解决:

// click  touchend 都要监听
$('.news-content .news-item').on('click touchend', function () {
  var el = $(this);
  location.href = el.attr('data-url');
});

使用上述方法,会发现在ios中上下滑动页面的时候会触发跳转,所以还是不推荐使用。 建议统一使用 FastClick 进行处理,此时也无需监听touchend事件了。

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