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 微信易 ...
随机推荐
- (4)oracle连接工具和配置监听
一.SQL PLUS sql plus 是oracle最常用的命令行工具,启动sqlplus工具的方法有两种 1. 是在安装好的oracle开始程序的路径下运行程序 点击运行弹出此界面 2 .是在cm ...
- 51nod 1420 数袋鼠好有趣【贪心】
1420 数袋鼠好有趣 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注 有n只袋鼠.每只袋鼠的大小用一个整数表示. ...
- Xamarin XAML语言教程通过ProgressTo方法对进度条设置
Xamarin XAML语言教程通过ProgressTo方法对进度条设置 在ProgressBar中定义了一个ProgressTo方法,此方法也可以用来对进度条当前的进行进行设置,ProgressTo ...
- 收纳箱1号 | GitHub Pages部署静态网页的一点私货
Static site 总结各种各有的 static site generator Jekyll 其实是一个 static site generator. 如果你去 Google 这个,会发现有很多总 ...
- CRUD_PreparedStatement
package songyan.jdbc.crud; import java.sql.Connection; import java.sql.PreparedStatement; import jav ...
- 用Xcode6的Leaks检测内存泄漏
用xcode打开项目之后,选择Product - Profile: 在弹出的窗口中选择Leaks: 然后在设备解锁的情况下,选择Leaks再点击左上角的红色按钮开始运行APP: 红色的柱子表示有内存泄 ...
- EF for oracle中无法读取配置 显示无法open问题解决方式
1.更新以上设置为 非注销部分 弄了很久很久哈.
- C++ 11中几个我比较喜欢的语法（三）
随着Vsisual Studio 2013 RC版的放出,之前承诺的对C++ 11语法支持已经全部完成,本文是C++ 11中我喜欢的语法系列的最后一部分(一),(二). 非静态成员直接初始化 在C++ ...
- POJ 3694 Network （求桥，边双连通分支缩点，lca）
Network Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 5619 Accepted: 1939 Descripti ...
- 解析HTML文件 - 运用SgmlReader类来解析HTML文件
运用.NET Framework类来解析HTML文件.读取数据并不是最容易的.虽然你可以用.NET Framework中的许多类(如StreamReader)来逐行解析文件,但XmlReader提供的 ...