JS 手势长按代码
同时支持长按和点击事件，无依赖版
<!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>
JS 手势长按代码的更多相关文章
- H5案例分享：JS手势框架 —— Hammer.js
JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...
- three.js 3d三维网页代码加密的实现方法
http://www.jiamisoft.com/blog/17827-three-js-3dsanweiwangyejiami.html https://www.html5tricks.com/ta ...
- [JS]以下是JS省市联动菜单代码
以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...
- js文字向上滚动代码
js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px; background:#edfafd; padding-top:2px; ...
- Js弹性漂浮广告代码
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...
- 如何写兼容浏览器和Node.js环境的Javascript代码
如果有打开过jQuery的源码(从1.11及以后),或者Vue.js.React.js的源码,都会在文件的前面看见这样一段代码: ( function( global, factory ) { &qu ...
- 常用的JS页面跳转代码调用大全
一.常规的JS页面跳转代码 1.在原来的窗体中直接跳转用 <script type="text/javascript"> window.location.href=&q ...
- 基于 Koa平台Node.js开发的KoaHub.js连接打印机的代码
最近好多小伙伴都在做微信商城的项目,那就给大家分享一个基于 Koa.js 平台的 Node.js web 开发的框架连接微信易联云打印机接口的代码,供大家学习.koahub-yilianyun 微信易 ...
随机推荐
- CF987A Infinity Gauntlet【STL】
[链接]:CF987A [分析]:运用map [代码]: #include <iostream> #include<queue> #include<string.h> ...
- "科林明伦杯"哈尔滨理工大学第八届程序设计竞赛 题解
题目链接 Problems Problem A 快速幂累加即可. #include <cstdio> #include <cstring> #include <iost ...
- Jmeter实时性能测试数据的监控
Jmetet实时性能测试数据的监控和展示Jmeter Grafana InfluxDB 安装Grafana配置jmeter安装InfluxDB配置Grafana展示数据一安装InfluxDB 为了方便 ...
- 洛谷——P2368 EXCEEDED WARNING B
P2368 EXCEEDED WARNING B 题目背景 SGU 107 题目描述 求有多少个平方后末尾为987654321的n位数 输入输出格式 输入格式: 整数n 输出格式: 答案,即[b]“平 ...
- HKSCS
香港增补字符集(HKSCS) 背景介绍 背景资料 ======== 目前,大部份不同語文的電腦系統,都有不同的編碼標準.如中文的系統就有BIG5和GB2312/GBK.各種文字有不同的文字編碼,不同系 ...
- ACM入门指南
本文已经转移到了:http://harryguo.me/2015/11/03/ACM-%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97/ 什么是ACM? 想必打开这篇博客的人已 ...
- [CTSC2018]假面(概率DP)
考场上以为CTSC的概率期望题都不可做,连暴力都没写直接爆零. 结果出来发现全场70以上,大部分AC,少于70的好像极少,感觉血亏. 设a[i][j]表示到当前为止第i个人的血量为j的概率(注意特判血 ...
- Array方法介绍
Array 是抽象基类,抽象基类不能创建它的对象 定义的数组: int[,] myArr4=new int[2,3]{{1,2,3},{4,5,6}}; int[, ,] myArr3 = new i ...
- ocmock
- sql cast函数
一.语法: CAST (expression AS data_type) 参数说明: expression:任何有效的SQLServer表达式. AS:用于分隔两个参数,在AS之前的是要处理的数据,在 ...