JS 手势长按代码
2023-09-11 14:16:39 时间
同时支持长按和点击事件,无依赖版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Document</title> </head> <style> body { max-width: 540px; min-width: 320px; } </style> <body> <button id="longPress">longPress</button> <li class="longPress">longPress</li> <li class="longPress">longPress</li> <li class="longPress">longPress</li> <li class="longPress">longPress</li> </body> <script> /** * 绑定长按事件,同时支持绑定点击事件 * @param {dom} dom 需要绑定的dom元素 * @param {fn} longPressCallBack 长按事件执行的方法 * @param {fn} touchCallBack 点击事件执行的方法 */ var longPress = function (dom, longPressCallBack, touchCallBack) { var timer = undefined; var isLongPress = false; var setEvent = function (e) { e.addEventListener('touchstart', function(event) { timer = setTimeout(function () { isLongPress = true longPressCallBack && longPressCallBack(e); }, 500); }, false); e.addEventListener('touchmove', function(event) { clearTimeout(timer); }, false); e.addEventListener('touchend', function(event) { if (!isLongPress) touchCallBack && touchCallBack() clearTimeout(timer); isLongPress = false; }, false); } if (dom.length) { // 支持绑定多个元素 for (var i = 0; i < dom.length; i++) { setEvent(dom[i]) } } else { setEvent(dom) } } longPress(document.getElementById('longPress'), function () { console.log('longPress') }, function () { console.log('touch'); }); [...document.querySelectorAll('.longPress')].forEach(function (e, i) { longPress(e, function () { console.log('longPress') }, function () { console.log('touch'); }); }); </script> </html>
jquery / zepto版本的实现,注意闭包的问题
$.fn.longPress = function(callback) { var timer = undefined; var $this = this; // 支持绑定多个元素 for (var i = 0; i < $this.length; i++) { var self = $this[i];
// 注意这里的闭包问题 (function(e){ self.addEventListener('touchstart', function(event) { timer = setTimeout(function () { callback(e); }, 500); }, false); self.addEventListener('touchmove', function(event) { clearTimeout(timer); }, false); self.addEventListener('touchend', function(event) { clearTimeout(timer); }, false); })($this[i]); } } // 调用示例 $(".card-con li").longPress(function(e){ console.log(e, $(e).index()); });
知乎上找到的原生实现:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <div style="width:100%;"> <div id="touchArea" style="width:90%; height:200px; background-color:#CCC;font-size:100px">长按我</div> </div> <script> var timeOutEvent=0; $(function(){ $("#touchArea").on({ touchstart: function(e){ timeOutEvent = setTimeout("longPress()",500); e.preventDefault(); }, touchmove: function(){ clearTimeout(timeOutEvent); timeOutEvent = 0; }, touchend: function(){ clearTimeout(timeOutEvent); if(timeOutEvent!=0){ alert("你这是点击,不是长按"); } return false; } }) }); function longPress(){ timeOutEvent = 0; alert("长按事件触发发"); } </script> </body> </html>
相关文章
- 在SUBLIME TEXT中安装SUBLIMELINTER进行JS&CSS代码校验
- Vue - 在纯 JS 文件中调用自定义组件 / 类似 ElementUI 弹框组件 Message、Modal(在纯 js 文件中通过 import 方式引入并调用弹框模态框组件显示出来,)
- uni-app - 最详细 H5 网页接入微信支付功能,提供从详细的示例代码与注释(移动端网页实现微信支付能力,微信公众号前端支付 JSAPI / JS-SDK 详细示例源码)官方最新超级详细教程
- 《Node.js区块链开发》——1.2 什么是加密货币
- java去除html代码中含有的html、js、css标签,获取文字内容
- Tinymce 5 插入代码 插件 highlight.js 版
- js对象键值对转换为数组包对象
- JS 保姆级贴心,从零教你手写实现一个防抖debounce方法
- (28)打鸡儿教你Vue.js
- 分享一个有用的js日常操作工具-underscore
- 原生js 当前时间 倒计时代码
- js随机点名
- 【手撕代码系列】JS手写实现Promise.all
- 【手撕代码系列】JS手写实现Promise
- JS代码把JSON字符串转换为对象,计算对象的长度并把它转换为数字类型,把转换的值相加减
- JS 实现精确加减乘除
- vue项目mixin.js的使用及注意详解
- JS 工具函数 方法(其中js的crc32和php的crc32区别)
- mitt.js
- js键盘各键对应的代码
- js-原生Js汉语拼音首字母匹配城市名
- JS原生Ajax和jQuery的Ajax与代码示例-ok
- three.js实现全套3d测距功能(附完整代码)