解決: 移動端經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
})