您当前位置：首页 > 互联网 > 触屏touchstart 与 click

触屏touchstart 与 click

来源：程序员人生发布时间：2014-09-17 14:30:48 阅读次数：2618次

设计效果：当手指点击或触摸红框线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

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 微信开发HTML5轻游戏中的几个坑

下一篇 百度技术开放日感悟：看百度如何获取大数据时代的“船票”

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点