首先是HTML;
这里下载了一个封装touch事件的相关插件–> touch.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//引用jq,我是直用的相关框架里面的jq
<script src="lib/jquery/1.9.1/jquery.js"></script>
//导入touch.js
<script src="js/touchjs/touch.js"></script>
</head>
<body>
<div id="name01"> 这是一个box01</div>
</body>
</html>
touch.js
核心方法:
touch.on(element,types,callback);
参数说明,
element element或string 元素对象、选择器
types string 事件的类型(多为手势事件),可接受多个事件以空格分开;支持原生事件的透传
callback function 事件处理函数, 移除函数与绑定函数必须为同一引用;
$(document).ready(function () {
//这里采用了定时器的方式才判定用户的操作到底是点击还是长按
var timeOutEvent;
touch.on("#name01","touchstart",function(e) {
// 长按事件触发
timeOutEvent = setTimeout(function() {
timeOutEvent = 0;
alert('你长按了');
}, 1000);
});
touch.on("#name01","touchmove",function() {
clearTimeout(timeOutEvent);
timeOutEvent = 0;
});
touch.on("#name01","touchend",function() {
clearTimeout(timeOutEvent);
if (timeOutEvent != 0) {
console.log('你点击了');
}
return false;
});
});
基本上就射这么简单,
更多关于touch.js 的相关信息,可以看touch.js文档——