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

Posted 2021-01-13 huoxiao

前言

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

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

View Code

在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
})