設計效果:當手指點擊或觸摸紅框線menuList之外的部分時,彈框menuList消失。
問題:在優化觸屏版的時候發現如圖問題,當menuList彈出,手指觸摸屏幕向下滑動時,menuList彈框不消失,只有手指點擊menuList之外的部分才消失。
查看代碼發現,源代碼只定義了click事件:
$(doc.body).on('click',function(e) {
if (e.target.id != 'menu') headerMenu.hide();
});
說明觸屏版對click和touch解析是不同的事件。
於是查了下touch的用法,發現是有touchstart,touchmove,touchend事件的,並且可以像click樣直接使用。
於是更改代碼:
$(doc.body).on('click touchmove',function(e) {
if (e.target.id != 'menu') headerMenu.hide();
});
OK,可以