javascript长按事件实现方式
先贴出实践中实现的代码,参考(https://segmentfault.com/q/1010000011640937?sort=created):
parentObj.addEventListener("touchstart", function (e) {
console.log('touchstart');
timer = setTimeout(function () {
console.log('LongPress');
e.preventDefault();
LongPress(parentObj);
}, 800);
});
parentObj.addEventListener("touchmove", function (e) {
console.log('touchmove');
clearTimeout(timer);
timer = 0;
});
parentObj.addEventListener("touchend", function (e) {
console.log('touchend');
clearTimeout(timer);
//if (timer != 0) {
// alert('这是点击,不是长按');
//}
return false;
});
先获取元素对象,然后设置ontouchstart和ontouchend事件,注意,这里的是事件,和touchstart(方法)有所区别,然后在手机浏览器中,为了避免长按弹出窗口,设置e.preventDefafult()来屏蔽弹出。
其实,这些是比较容易,最常见的实现方式,在网上找资料的时候发现很多其他的实现,比如利用zepto.js插件,这是一个jQuery.js的移动端实现,通过这个库,实现方式如下:
,这个实现的链接(https://segmentfault.com/q/1010000003956296)
自己也实现了,调试过程中,发现,在微信开发者工具里面,没有问题,longTap能调用,在手机上,就几乎调用不成功,触发的概率非常小,不知道是因为和手机上长按时有微小移动有关系。所以最终放弃了这个实现。
**********************************************分割线**********************************************
关于长按的弹窗菜单怎么屏蔽,网上查了很多资料,都是设置e.preventDefault(),来实现,但是一直用的是
//obj.addEventListener("touchstart", function (e) {
// e.preventDefault();
//}, false);
这个设置的应该是屏蔽触屏的反应,设置屏蔽弹出菜单的应该是这样:
document.oncontextmenu = function (e) {
e.preventDefault();
};
javascript长按事件实现方式的更多相关文章
- Android自定义长按事件
Android系统自带了长按事件,setOnLongClickListener即可监听.但是有时候,你不希望用系统的长按事件,比如当希望长按的时间更长一点的时候.这时候就需要自己来定义这个长按事件了. ...
- javascript事件小结(事件处理程序方式)--javascript高级程序设计笔记
1.事件流:描述的是从页面中接收事件的顺序. 2.事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档). 3.事件捕获 ...
- javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
- JavaScript三种绑定事件的方式
JavaScript三种绑定事件的方式: 1. <div id="btn" onclick="clickone()"></div> // ...
- javascript之-深入事件机制
作者:yuyuyu链接:https://zhuanlan.zhihu.com/p/24620643来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1.1 事件绑定的方式 ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- javaWeb核心技术第四篇之Javascript第二篇事件和正则表达式
- 事件 - 表单提交(掌握) "onsubmit" - 单击事件(掌握) "onclick" - 页面加载成功事件(掌握) "onload" ...
- 浅谈Javascript单线程和事件循环
单线程 Javascript 是单线程的,意味着不会有其他线程来竞争.为什么是单线程呢? 假设 Javascript 是多线程的,有两个线程,分别对同一个元素进行操作: function change ...
- javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
随机推荐
- 【大白话系统】MySQL 学习总结 之 缓冲池(Buffer Pool) 如何支撑高并发和动态调整
如果大家对我的 [大白话系列]MySQL 学习总结系列 感兴趣的话,可以点击关注一波. 一.上节回顾 在上节< 缓冲池(Buffer Pool) 的设计原理和管理机制>中,介绍了缓冲池整体 ...
- Hexo搭建静态博客踩坑日记(一)
前言 博客折腾一次就好, 找一个适合自己的博客平台, 专注于内容进行提升. 方式一: 自己买服务器, 域名, 写前端, 后端(前后分离最折腾, 不分离还好一点)... 方式二: 利用Hexo, Hug ...
- Spring Bean几种注入方式——setter(常用),构造器,注入内部Bean,注入集合,接口...
依赖注入分为三种方式: 1.1构造器注入 构造器通过构造方法实现,构造方法有无参数都可以.在大部分情况下我们都是通过类的构造器来创建对象,Spring也可以采用反射机制通过构造器完成注入,这就是构造器 ...
- iptbales 允许访问vsftp
1.允许20 21 端口iptables -I INPUT -p tcp -m multiport --dport 20,21 -j ACCEPT 2.允许关联包通过iptables -A INPUT ...
- zabbix 自定义监控项每隔1分钟检测一次三次失败报警
在agent上添加 UserParameter=auth.check,/etc/zabbix/auth_monitor/auth_check.py auth.check就是之后添加的自定义的item值 ...
- CentOS7重置密码
#在vmlinuz段最后添加rd.break Ctrl+X启动 rd.break #在linux16/linux/linuxefi所在参数行尾添加以下内容 init=/bin/sh #此时,可使用mo ...
- 7个有用的JS技巧
就如其他的编程语言一样,JavaScript也具有许多技巧来完成简单和困难的任务. 一些技巧已广为人知,而有一些技巧也会让你耳目一新. 让我们来看看今天可以开始使用的七个JavaScript技巧吧! ...
- 在React中使用WebUploader实现大文件分片上传的踩坑日记!
前段时间公司项目有个大文件分片上传的需求,项目是用React写的,大文件分片上传这个功能使用了WebUploader这个组件. 具体交互是: 1. 点击上传文件button后出现弹窗,弹窗内有选择文件 ...
- 【5min+】后台任务的积木。.NetCore中的IHostedService
系列介绍 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的.net ...
- 《C# 6.0 本质论》 - 学习笔记
<C# 6.0 本质论> ========== ========== ==========[作者] (美) Mark Michaelis (美) Eric Lippert[译者] (中) ...