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 微信易 ...
随机推荐
- POJ 3620 Avoid The Lakes【DFS找联通块】
Avoid The Lakes Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6826 Accepted: 3637 D ...
- Python与数据库[2] -> 关系对象映射/ORM[3] -> sqlalchemy 的声明层 ORM 访问方式
sqlalchemy的声明层ORM访问方式 sqlalchemy中可以利用声明层进行表格类的建立,并利用ORM对象进行数据库的操作及访问,另一种方式为显式的 ORM 访问方式. 主要的建立步骤包括: ...
- [Math Review] Statistics Basic: Sampling Distribution
Inferential Statistics Generalizing from a sample to a population that involves determining how far ...
- HDU 4417 Super Mario （划分树）（二分）
Super Mario Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- luogu P1821 [USACO07FEB]银牛派对Silver Cow Party
题目描述 One cow from each of N farms (1 ≤ N ≤ 1000) conveniently numbered 1..N is going to attend the b ...
- 访问控制技术- 扩展IP访问列表
1.设置pc IP 网关 192.168.1.1 192.168.1.254 192.168.1.2 192.169.1.254 192.168.3.1 192.168.3.254 192.168.3 ...
- CocoaPods安装使用及配置私有库及注意点
如何安装? 1.安装ruby环境,添加淘宝ruby镜像 $ gem sources --remove https://rubygems.org///等有反应之后再敲入以下命令$ gem sources ...
- easyui combogrid 按需加载,点击下拉加载
功能优点:减少不必要的http请求,减少服务器查询压力,降低额外的浏览器渲染,提高呈现速度开发分享: combogrid 点击才请求的功能实现简要:我分析了费用系统,和现在全网的写法.并不满意.都是要 ...
- SQL Server 2005 系统数据介绍:dm_exec_connections
原文:SQL Server 2005 系统数据介绍:dm_exec_connections 转载:http://msdn.microsoft.com/zh-cn/library/ms181509(SQ ...
- Android 高版本API方法在低版本系统上的兼容性处理
Android 版本更替,新的版本带来新的特性,新的方法. 新的方法带来许多便利,但无法在低版本系统上运行,如果兼容性处理不恰当,APP在低版本系统上,运行时将会crash. 本文以一个具体的例子说明 ...