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 微信易 ...
随机推荐
- Spring Cloud之分布式配置中心
用服务的方式来实现 ConfigAppApplication.java package com.packtpub.ConfigApp; import org.springframework.boot. ...
- ASP.NET Code First Update-Database
问题描述: 复制了一个模块化的MVC5的项目,模块化的解释是说不同功能的模块分开来放的. 明确每个模块都是做什么工作的. 首先最基本的,就是根据Apps.Models模块来创建数据库了. 做法是卸载A ...
- Python的并发并行[4] -> 并发[0] -> 利用线程池启动线程
利用线程池启动线程 submit与map启动线程 利用两种方式分别启动线程,同时利用with上下文管理来对线程池进行控制 from concurrent.futures import ThreadPo ...
- hdu6035（树形DP）
hdu6035 题意 给出一棵树,现在定义两点之间距离为两点间最短路径上颜色集合的大小.问任意两点间距离之和. 分析 换个方向,题目其实等价于求每种颜色在多少条路径上出现过(每种颜色对于答案的贡献), ...
- 第八章 android-布局
常用的布局实现方式:线性布局,框架布局,表格布局,相对布局,绝对布局 1,线性布局 (1)线性布局是一种很重要的布局,也是经常用到的一种布局 (2)在线性布局中,所有的元素都按照水平竖直的顺序在界面上 ...
- 【java】开源工具包hutool
开源工具包hutool GitHub地址:https://github.com/looly/hutool 项目主页:http://www.hutool.cn/
- 【Linux】CentOS7上设置快捷键 随时补充
---------------------------------------------------------------------------------------------------- ...
- 【myEcplise2015】导入喜欢的主题
1.在官网下载epf样式文件 http://www.eclipsecolorthemes.org/ 2.选择一个喜欢的点击进入,点击下载 3.File -->Import--->Gener ...
- VBA 时间相关的函数
DateSerial DateADD Datediff http://www.yiibai.com/vba/vba_datediff_function.html https://www.techont ...
- etcd：从应用场景到实现原理的全方位解读
随着CoreOS和Kubernetes等项目在开源社区日益火热,它们项目中都用到的etcd组件作为一个高可用强一致性的服务发现存储仓库,渐 渐为开发人员所关注.在云计算时代,如何让服务快速透明地接入到 ...