设计效果:当手指点击或触摸红框线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的更多相关文章

  1. 触摸屏touchstart 与 click

    设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失. 问题:在优化触屏版的时候发现如图问题.当menuList弹出.手指触摸屏幕向下滑动时,menuList弹框不消 ...

  2. 自己用原生JS写的轮播图,支持移动端触屏滑动,面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  3. 移动端触屏click点击事件延迟问题,以及tap的解决方案

    在移动端 触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常 ...

  4. touch移动触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  5. 朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现

    翻页插件:实现原理,用margin-top来控制页面容器位置来实现上下翻页.margin这属性很好用,可以用来制作侧栏动画滑出菜单(左菜单,右内容,控制两者的margin实现):或者head下滑菜单 ...

  6. JS移动客户端--触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  7. JS移动客户端--触屏滑动事件 banner图效果

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  8. JS的Touch事件们,触屏时的js事件

    丫的,终于找到了JS在平板电脑上的事件!!!   iphone.ipod Touch.ipad触屏时的js事件   1.Touch事件简介   pc上的web页面鼠标会产生onmousedown.on ...

  9. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

随机推荐

  1. IOS开发之记录用户登陆状态

    上一篇博客中提到了用CoreData来进行数据的持久化,CoreData的配置和使用步骤还是挺复杂的.但熟悉CoreData的使用流程后,CoreData还是蛮好用的.今天要说的是如何记录我们用户的登 ...

  2. ASP.NET MVC 混搭 ASP.NET WebForms 所导致的 Html.ActionLink/BeginForm 问题

    首先,需要了解下这篇博文:<ASP.NET WebForms MapPageRoute 路由配置> 之前,在 ASP.NET MVC 中混搭 ASP.NET WebForms,使用 Map ...

  3. How to implement a neural network

    神经网络的实践笔记 link: http://peterroelants.github.io/posts/neural_network_implementation_part01/ 1. 生成训练数据 ...

  4. 【JUC】JDK1.8源码分析之ConcurrentHashMap(一)

    一.前言 最近几天忙着做点别的东西,今天终于有时间分析源码了,看源码感觉很爽,并且发现ConcurrentHashMap在JDK1.8版本与之前的版本在并发控制上存在很大的差别,很有必要进行认真的分析 ...

  5. 在IHttpHandler中获取session

    因为业务要异步通过IHttpHandler获得数据,但还要根据当前登录人员的session过滤,因此要在在IHttpHandler中获取session 方法是HttpHandler容器中如果需要访问S ...

  6. 史上最全的Ajax基础详解

    同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...

  7. IIS实现反向代理

    http://www.cnblogs.com/dreamer-fish/p/3911953.html C#实现: C#写的一个反向代理,可以缓存 https://www.oschina.net/cod ...

  8. SQL Server中的GUID

    GUID(Global unique identifier)全局唯一标识符,它是由网卡上的标识数字(每个网卡都有唯一的标识号)以及 CPU 时钟的唯一数字生成的的一个 16 字节的二进制值. GUID ...

  9. Codeforces Round #234A

    Inna and choose option     题意: 一个由12个字符('O'或'X')组成的字符串,这12个字符可以排列成a*b(a*b=12)的矩阵,要求矩阵某一列都是'X'.用户输入t个 ...

  10. 数据结构:单链表结构字符串(python版)添加了三个新功能

    #!/urs/bin/env python # -*- coding:utf-8 -*- #异常类 class stringTypeError(TypeError): pass #节点类 class ...