触摸屏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
版权声明:本文博客原创文章,博客,未经同意,不得转载。
触摸屏touchstart 与 click的更多相关文章
- 关于"touchstart与click同时触发"问题
点击事件可以分解成多个事件: 在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend --> click 由于移动设备能够同时 ...
- 触屏touchstart 与 click
设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失. 问题:在优化触屏版的时候发现如图问题,当menuList弹出,手指触摸屏幕向下滑动时,menuList弹框不消 ...
- 手机设备上touchstart与click的区别
1.基本定义 touchstart 手指触碰开始就能触发 click 1.手指触碰 2.手指未在屏幕上移动 3.在这个dom上手指离开屏幕 4.触摸和离开屏幕之间的时间间隔较短 因此,click事件有 ...
- touchstart和click 自动区分
var clickEvent = (function() { if ('ontouchstart' in document.documentElement === true) return 'touc ...
- 如何解决 touchstart 事件与 click 事件的冲突
一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart ...
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
- web移动前端的click点透问题
在移动端开发中,有时会出现click点透的问题. 一.什么是click点透 以下情况,在B元素上有半透明红色遮盖层A,黄色B元素内有可点击链接C. tips:以下举例仅针对webkit内核浏览器,所有 ...
- 移动端为何不使用click而模拟tap事件及解决方案
移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...
- tap 和click 事件区别
clike事件和 Zepto.js 中tap的区别 首先介绍下Zepto: 最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小. 介绍下tap ...
随机推荐
- Autodesk FBX SDK Program 中文 (二)
这是Autodesk FBX SDK学习笔记第二篇.下面部分汉字翻译自Autodesk FBX SDK Program.翻译人:有道翻译. 上一篇讲了一些FBX SDK的基本操作.创建FbxManag ...
- Android菜鸟的成长笔记(15)—— Android中的状态保存探究(下)
原文:Android菜鸟的成长笔记(15)-- Android中的状态保存探究(下) 在上一篇中我们简单了解关于Android中状态保存的过程和原理,这一篇中我们来看一下在系统配置改变的情况下保存数据 ...
- 冒泡排序----java实现
冒泡排序思路:第1次:顺序比较从第0个到第len个(相邻两个)元素并把大的放后面,第一次进行完后,最大 的元素会在最后: ...
- SSH2.0编程 ssh协议过程实现(转)
SSh协议: 全称为Secure Shell,即很安全的shell,主要目的是用来取代传统的telnet和r系列命令(rlogin,rsh,rexec等)远程登录和远程执行命令的工具,实现远程登录和远 ...
- 《编程简介(Java) ·10.3递归思想》
<编程简介(Java) ·10.3递归思想> 10.3.1 递归的概念 以两种方式的人:男人和女人:算法是两种:递归迭代/通知: 递归方法用自己的较简单的情形定义自己. 在数学和计算机科学 ...
- 构造NFS
一.设备nfs-utils 伺服器: [root@server05 ftp]# yum install nfs-utils 这时会自己主动安装rpcbind需将此服务重新启动nfs服务才干启动 cli ...
- Android学习路径(十)怎么会Action Bar堆放在布局
默认情况下.action bar出如今activity窗体的顶部.稍微降低了activity布局的总空间. 假设你想隐藏或者显示action bar.在这堂用户体验的课程中,你能够通过调用hide() ...
- Android4.2.2由于越来越多的物理按键(frameworks)
当我们改变frameworks之后可能: make: *** [out/target/common/obj/PACKAGING/checkapi-current-timestamp] 错误 38 解决 ...
- HDD-FAT32 ZIP-FAT32
在使用U当家U盘启动盘制作工具的时候会看到一个模式的选项,模式分为HDD-FAT32和ZIP-FAT32两个常用的模式,其它的模式几乎用不到的.那么HDD-FAT32和ZIP-FAT32模式到底有什么 ...
- NET MVC过滤器
NET MVC过滤器 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 在ASP.NET MVC中有四种过滤器类型