解决: 移动端经mouseover显示出的弹层中链接点击问题

通常我们会遇到这样的需求,导航菜单在鼠标划过的时候显示自定义弹层,在弹层中有一些链接需要点击后跳转或者其他一些事件。比如:

$(".menu li").on("mouseover", function(){
var el = $(this);
el.find(".dropdown").show();
});
$(".menu li").on("mouseout", function(){
var el = $(this);
el.find(".dropdown").show();
})

在pc端中没任何问题,但是不做任何自适应处理放到移动端就会产生一些问题:

  • 原本的mouseover事件自动变成了click事件
  • dropdown中的链接只要在点击第二次的时候才会触发跳转

第一个问题是因为mouse*是鼠标事件,专门为鼠标设计的,而mouseover/out等事件则会被手指的点击所触发。所以在移动端开发的时候要尽可能抛弃传统的mouseoveer/out等事件,用Touch事件或者更高级的Gesture事件来代替。

第二个问题就有意思了,无论是通过a标签的href属性做跳转还是改为js跳转全部都要执行第二次才能触发,开始以为是css伪类把原本的事件阻止了,于是把hover样式去掉,发现问题依旧。因为项目为移动pc自适应,所以固执的想要用一套代码解决这个问题。

既然移动端能很好的响应touch事件,那就同时加上click和touchend(jquery自带),哪个生效执行哪个,试试,果然好了。

将原本的链接跳转改为js跳转:

$(".dropdown li a").on("click touchend", function(){
// do something
})
上一篇:vs设计界面出现“建控件时出错 响应在此上下文中不可用”


下一篇:时序分解算法:STL