先贴出实践中实现的代码,参考(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长按事件实现方式的更多相关文章

  1. Android自定义长按事件

    Android系统自带了长按事件,setOnLongClickListener即可监听.但是有时候,你不希望用系统的长按事件,比如当希望长按的时间更长一点的时候.这时候就需要自己来定义这个长按事件了. ...

  2. javascript事件小结(事件处理程序方式)--javascript高级程序设计笔记

    1.事件流:描述的是从页面中接收事件的顺序. 2.事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档). 3.事件捕获 ...

  3. javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

  4. JavaScript三种绑定事件的方式

    JavaScript三种绑定事件的方式: 1. <div id="btn" onclick="clickone()"></div> // ...

  5. javascript之-深入事件机制

    作者:yuyuyu链接:https://zhuanlan.zhihu.com/p/24620643来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1.1 事件绑定的方式 ...

  6. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  7. javaWeb核心技术第四篇之Javascript第二篇事件和正则表达式

    - 事件 - 表单提交(掌握) "onsubmit" - 单击事件(掌握) "onclick" - 页面加载成功事件(掌握) "onload" ...

  8. 浅谈Javascript单线程和事件循环

    单线程 Javascript 是单线程的,意味着不会有其他线程来竞争.为什么是单线程呢? 假设 Javascript 是多线程的,有两个线程,分别对同一个元素进行操作: function change ...

  9. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

随机推荐

  1. Robot Framework自动化测试框架核心指南-如何使用Java编写自定义的RobotFramework Lib

    如何使用Java编写自定义的RobotFramework Lib 本文包括2个章节 1. Robot Frdamwork中如何调用java Lib库 2.使用 java编写自定义的Lib 本文作者为: ...

  2. Java生成微信分享海报【基础设计】

    前言 微信后台生成海报一般都是一个模板写死,然后就完事了,过了不久让修改个模板,就又要看半天,还要考虑是否重新复制一份改一改,越来越多的重复代码,全在一个图片类里,然后就越来越乱.这两天用设计模式处理 ...

  3. Linux 下用 superpi 测试 CPU 性能

  4. H5谷歌登录 webview错误

    接入谷歌登录 H5接入谷歌登录打包apk使用webview谷歌登录不上(谷歌不支持用户代理被归类为嵌入式用户代理(也称为网络视图),因此不允许向Google发出OAuth授权请求) 解决办法:替换ua ...

  5. 设置ssh远程其他主机登录显示提示信息

    文件及路径: /etc/motd 实例: [root@A-client ~]# ssh -p 22 test@10.0.0.2 test@10.0.0.2's password: Last login ...

  6. 2019IT运维大会上海站 智和信通解析等保2.0支撑

    2019IT运维大会上海站 智和信通解析等保2.0支撑 2019年11月14日上午8:30-12:10,上海锦荣国际大酒店二层锦荣厅

  7. 图像分割:Semantic/Instance/Panoramic Segmentation

    一. 背景介绍 语义分割(Semantic Segmentation):对一张图片上的所有像素点进行分类,同一物体的不同实例不需要单独分割出来. 实例分割(Instance Segmentation) ...

  8. 图解Java设计模式之UML类图

    图解Java设计模式之UML类图 3.1 UML基本介绍 UML图 UML类图 3.1 UML基本介绍 1)UML – Unified modeling language UML(统一建模语言),是一 ...

  9. Java Lamada

    Collection: ->stream:返回一个以 colleciotn 元素为数据源的数据流. -->map: 入参 Function 对象,将此流中的元素依次作用于传入的 Funct ...

  10. C#的多线程简洁笔记

    New Thread(()=>{}).Start(); //匿名线程 Thread Ntd = new Thread(T1); Ntd.IsBackground = true; //后台线程 N ...