触屏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,可以
触屏touchstart 与 click的更多相关文章
- 触摸屏touchstart 与 click
设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失. 问题:在优化触屏版的时候发现如图问题.当menuList弹出.手指触摸屏幕向下滑动时,menuList弹框不消 ...
- 自己用原生JS写的轮播图,支持移动端触屏滑动,面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- 移动端触屏click点击事件延迟问题,以及tap的解决方案
在移动端 触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常 ...
- touch移动触屏滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- 朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现
翻页插件:实现原理,用margin-top来控制页面容器位置来实现上下翻页.margin这属性很好用,可以用来制作侧栏动画滑出菜单(左菜单,右内容,控制两者的margin实现):或者head下滑菜单 ...
- JS移动客户端--触屏滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
- JS的Touch事件们,触屏时的js事件
丫的,终于找到了JS在平板电脑上的事件!!! iphone.ipod Touch.ipad触屏时的js事件 1.Touch事件简介 pc上的web页面鼠标会产生onmousedown.on ...
- JS案例之5——移动端触屏滑动
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
随机推荐
- OracleDBA之数据库管理
以下这些东西是我的麦库上存的当时学Oracle的学习笔记今天拿出来和大家分享一下,转载请注明出处,下面用的Oracle的版本是10g,用的时WinServer2003的操作系统,可能有些命令和Orac ...
- html标签属性(attribute)和dom元素的属性(property)
简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...
- STL模板中的map的使用与例题
最近的计分赛,记得自己的都只是过了两题.遇到了两次map,自己在寒假看了一点的map,只知道在字符串匹配的时候可以用的到.但是自己对map的使用还是不够熟练使用,这回在第一次和第二次的计分赛中都遇到可 ...
- CSS实现的手风琴特效
CSS样式: //图像个数 @imageN:5; //图像hover之前的总宽度 @w:800px; //图像hover之后的宽度 @imageL:640px; //图像hover之前的宽度 @ima ...
- springmvc原理
今天面试碰到一个特别恶心的公司面试官.是一个金融公司,过去后告诉我2点上班,带我去见经理.经理找人面试,看起来没有hr,经理直接看简历招人.经理上来就问我是xxx大学的,我说是,然后等面试官.面试官来 ...
- Sql Server函数全解(三)数据类型转换函数和文本图像函数
一:数据类型转换函数 在同时处理不同数据类型的值时,SQL Server一般会自动进行隐士类型转换.对于数据类型相近的值是有效的,比如int和float,但是对于其它数据类型,例如整型和字符类型,隐士 ...
- jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——词法解析
jQuery源码9600多行,而Sizzle引擎就独占近2000行,占了1/5.Sizzle引擎.jQuery事件机制.ajax是整个jQuery的核心,也是jQuery技术精华的体现.里面的有些策略 ...
- nodejs学习笔记四——express-session
博友沉沉-_-的这篇express 框架之session分析的已经非常详细了,本人这里就不描述了. 总结其中的几个关键点. 1.http协议规定http链接是无状态的链接,cookie和session ...
- linux源码分析(二)-启动过程
前置:这里使用的linux版本是4.8,x86体系. 这篇是 http://home.ustc.edu.cn/~boj/courses/linux_kernel/1_boot.html 的学习笔记. ...
- 微信小程序,我的英雄列表
最近微信小程序炒得火热,就跟成都的这个房价一样.昨天我也尝试了一下,做了一个自己的英雄列表.今天将自己的制作过程记录于此. 1.下载微信开发者工具 官网链接:https://mp.weixin.qq. ...