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 微信易 ...
随机推荐
- hdu 1162(最小生成树)
Eddy's picture Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- 16aspx源码要求安装.csproj类型怎么安装
更改打开方式(不要双击打开),右键项目-打开方式选VS打开(应该会出现一个转换界面,转换下就好了).如果没有出那个界面我也没办法了
- 版本控制[0] -> git -> 使用 git 进行版本控制
版本控制 / Version Control 目录 git-版本控制 / git-Version Control git-常用命令 / git-Freq Command git-文件忽略 / git- ...
- Codeforces 825F - String Compression
825F - String Compression 题意 给出一个字符串,你要把它尽量压缩成一个短的字符串,比如一个字符串ababab你可以转化成3ab,长度为 3,比如bbbacacb转化成3b2a ...
- Java笔记：JDK安装小问题
昨天在实验室的Windows机器上安JDK,环境变量什么的都配好了,Java -version也没有问题,但是一运行Javac编译就会出现java/lang/NoClassDefFoundError: ...
- 探究堆喷射（heap spray）
博客园的自动保存系统真心不咋地,写的差不多的文章蓝屏之后就没有了,醉了! 浏览器是互联网世界最主要的软件之一,从IE6到IE11安全攻防在不断升级,防御措施的实施促使堆喷射技巧不断变化.写这篇博文想好 ...
- 关于Android攻击面
先对android整个攻击面有一个体系化的认识,有助于理清思路, 对今后的学习有很大的帮助. 什么是攻击向量:从语言语法的角度来说,是一个动词,描述用来执行攻击的方法,描述了攻击者如何到达并接触任意给 ...
- 小谈android/Linux rootkit（基于LKM）
最近又学习了一下,感觉还有好多东西不知道,以后积累多一点再从新写一个. 在android上捣鼓了一下linux的内核rootkit,虽然中途遇到了无数坑,至今也没有完全写完,打算先好好啃一段时间lin ...
- Tomcat配置和Spring MVC配置
Tomcat启动时,先找系统变量CATALINA_BASE,如果没有,则找CATALINA_HOME.然后找这个变量所指的目录下的conf文件夹,从中读取配置文件.最重要的配置文件:server.xm ...
- spring-----mvc的反射调用
这几天在看spring mvc 源码,一直很好奇它究竟在哪进行的反射调用,通过源码,仔细阅读,最后发现了调用位置在类 InvocableHandlerMethod 的doInvoke 方法 /** * ...