文档章节

js模拟长按事件的实现方式

niuhongxia
 niuhongxia
发布于 2017/02/20 11:05
字数 467
阅读 2.4K
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

以前自己没事开发了一个android webapp,其中有长按LI列表弹出菜单,有童鞋问怎么实现的,特此分享一下。 其实也很简单,只要清楚五个方法就行:ontouchstart、ontouchmove、ontouchend、setTimeout、clearTimeout 1、首先在我们按下手指时触发:ontouchstart 2、当我们释放手指时触发:ontouchend 3、如果在按与放之间你没有为其定义事件,那么系统自动认为是onclick事件 4、所以我们要在按与放之间定义一个事件longPress,这里就要用定时器setTimeout。 5、但如果在按与放之间有手指有移动,你不能认为它是长按,这应该是用户想滑动,所以ontouchmove时要取消定义的那个长按事件,这时就要取消定时器clearTimeout。 实例如下:

<div>长按我</div>  


var timeOutEvent=0;//定时器  
//开始按  
function gtouchstart(){  
    timeOutEvent = setTimeout("longPress()",500);//这里设置定时器,定义长按500毫秒触发长按事件,时间可以自己改,个人感觉500毫秒非常合适  
    return false;  
};  
//手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件  
function gtouchend(){  
    clearTimeout(timeOutEvent);//清除定时器  
    if(timeOutEvent!=0){  
        //这里写要执行的内容(尤如onclick事件)  
        alert("你这是点击,不是长按");  
    }  
    return false;  
};  
//如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按  
function gtouchmove(){  
    clearTimeout(timeOutEvent);//清除定时器  
    timeOutEvent = 0;  
};  
  
//真正长按后应该执行的内容  
function longPress(){  
    timeOutEvent = 0;  
    //执行长按要执行的内容,如弹出菜单  
    alert("长按事件触发发");  
}  

以上内容是:如果用户在500毫秒内没有放开手指,也没有移动手指,则触发长按事件

niuhongxia
粉丝 1
博文 147
码字总数 24719
作品 0
济南
私信 提问
加载中
请先登录后再评论。
Netty那点事(三)Channel与Pipeline

Channel是理解和使用Netty的核心。Channel的涉及内容较多,这里我使用由浅入深的介绍方法。在这篇文章中,我们主要介绍Channel部分中Pipeline实现机制。为了避免枯燥,借用一下《盗梦空间》的...

黄亿华
2013/11/24
2W
22
用vertx实现高吞吐量的站点计数器

工具:vertx,redis,mongodb,log4j 源代码地址:https://github.com/jianglibo/visitrank 先看架构图: 如果你不熟悉vertx,请先google一下。我这里将vertx当作一个容器,上面所有的圆圈要...

jianglibo
2014/04/03
3.9K
3
SQLServer实现split分割字符串到列

网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题。 先贴上某大牛写的s...

cwalet
2014/05/21
9.6K
0
Swift百万线程攻破单例(Singleton)模式

一、不安全的单例实现 在上一篇文章我们给出了单例的设计模式,直接给出了线程安全的实现方法。单例的实现有多种方法,如下面: class SwiftSingleton { } 这段代码的实现,在shared中进行条...

一叶博客
2014/06/20
3.3K
16
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.1K
1

没有更多内容

加载失败,请刷新页面

加载更多

代理服务器和反向代理服务器之间有什么区别? - What's the difference between proxy server and reverse proxy server?

问题: 代理服务器和反向代理服务器有什么区别? 解决方案: 参考一: https://stackoom.com/question/wRc/代理服务器和反向代理服务器之间有什么区别 参考二: https://oldbug.net/q/wRc/W...

技术盛宴
27分钟前
16
0
第八讲:配置外界可以访问虚拟机里面的HDFS

本节通过配置实现外界访问虚拟机Centos6.4里面的HDFS。为后续的java读写HDFS做准备 步骤有: 1、修改主机Windos7的网络配置 2、修改虚拟机Centos6.4里面的网络配置 3、修改虚拟机Centos6.4里...

刘日辉
45分钟前
26
0
OSChina 周四乱弹 —— 不劳而获的饭好吃么?好吃!非常好吃!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 小小编辑推荐:《世界上不存在的歌 (2020重唱版)》- 陈奕迅 《世界上不存在的歌 (2020重唱版)》- 陈奕迅 手机党少年们想听歌,请使劲儿戳(这...

小小编辑
今天
31
2
从 GPU、TPU,到 Web 端、移动端,深度学习框架部署训练开始变简单

本文作者:o****0 早些时候的统计显示,今年3月,深度学习框架集中爆发。5月,有人发布可以直接在 iphone11上训练神经网络的开源项目。日前,百度开源国内首个可直接运行在 Web 端的深度学习...

百度开发者中心
昨天
16
0
如何从Git存储库中删除文件? - How can I delete a file from a Git repository?

问题: I have added a file named "file1.txt" to a Git repository. 我已将名为"file1.txt"的文件添加到Git存储库中。 After that, I committed it, added a couple of directories called......

富含淀粉
今天
31
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部