解决: 移动端经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(); })

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