触屏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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python、Flask、Django

Go 脚本往InfluxDB插入数据

2451
来自专栏Taylor技术日志

Laravel-Excel导出功能文档

可以在闭包中修改一些属性,很多属性可在配置文件中设置默认值 config/excel.php

2.1K50
来自专栏hotqin888的专栏

小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

1041
来自专栏Bug生活2048

.net core下对于Excel的一些操作及使用

对于后台相关的管理系统,Excel导出是基本的功能,下面就简单说下实现该功能的代码实现吧

1672
来自专栏DeveWork

自定义(修改)WordPress管理后台界面的字体样式

默认的话,WordPress 后台管理界面的字体样式是“sans-serif”,中文的话直接是宋体了(当然,在Windows的机子上是这样,苹果机可能不同)。不...

3977
来自专栏前端说吧

canvas练习 - 七巧板绘制

902
来自专栏青玉伏案

iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)

这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动。于是乎就有了今天这篇博客,...

3068
来自专栏LIN_ZONE

js 图片与base64互相转换

参考地址:http://www.cnblogs.com/mr-wuxiansheng/p/6931077.html

1373
来自专栏前端知识分享

第47天:拖动弹出框

791
来自专栏菩提树下的杨过

silverlight数据绑定模式TwoWay,OneWay,OneTime的研究

asp.net开发中,数据绑定是一个很简单的概念,控件与数据绑定后,控件可以自动把数据按一定的形式显示出来。(当然控件上的值改变后,可以通过提交页面表单,同时后...

2316

扫码关注云+社区

领取腾讯云代金券