觸屏touchstart 與 click


設計效果:當手指點擊或觸摸紅框線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,可以

更多demo和解析:http://www.aliued.cn/2013/04/27/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91%E4%B9%8Btouch-event%E7%AF%87.html


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章