您的位置：首页 > 移动开发

web移动端触摸事件封装

2017-06-15 15:21 465 查看

web移动端触摸事件封装。包含长按触发,点按触发，滑动触发，结束触摸等

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
<title></title>
<style>
</style>
</head>
<body>
<div id="div1"> </div>
</body>
<script>
var onTouch={
c:0,
cc:5,
t:null,
move:false,
x:'',
y:'',
stop: function () {if(onTouch.t!=null){clearTimeout(onTouch.t);}},
init: function (callback) {onTouch.c=0;onTouch.stop();onTouch.timedCount(callback);},
timedCount: function(callback) {onTouch.c++;console.log(onTouch.c);if(onTouch.c>onTouch.cc){onTouch.stop();callback();return null;}onTouch.t=setTimeout(function () {onTouch.timedCount(callback);},100);},
timedCountEnd: function (callback) {if(onTouch.c<onTouch.cc){callback()}},
touchstart: function (obj,callback) {
obj.addEventListener('touchstart', function (event) {
onTouch.x=parseInt(event.touches[0].clientX);
onTouch.y=parseInt(event.touches[0].clientY);
console.log('触摸开始');
onTouch.init(function () {
callback();
});
}, false);
},
touchmove: function (obj,callback) {
obj.addEventListener('touchmove', function (event) {
onTouch.stop();
onTouch.x=parseInt(event.touches[0].clientX);

a831
onTouch.y=parseInt(event.touches[0].clientY);
onTouch.move=true;
console.log('触摸滑动');
callback();
}, false);
},
touchend: function (obj,callback1,callback2) {

obj.addEventListener('touchend', function (event) {
onTouch.stop();
onTouch.x=parseInt(event.changedTouches[0].clientX);
onTouch.y=parseInt(event.changedTouches[0].clientY);
if(onTouch.move==true){
callback1();
console.log('触摸滑动结束');
onTouch.move=false;
}else{
onTouch.timedCountEnd(function () {
console.log('触摸点击结束');
callback2();
});
}
}, false);
},
touchcancel: function (obj,callback) {
obj.addEventListener('touchcancel', function (event) {
onTouch.stop();
console.log('触摸取消');
callback();
}, false);
},
log: function (s) {
console.log(s +":"+ onTouch.x + "," + onTouch.y );
}
};

function loads(){
onTouch.touchstart(document, function () {
document.querySelector('#div1').innerHTML = "1";
alert('长按触发');
});
onTouch.touchmove(document, function () {
document.querySelector('#div1').innerHTML = "2";
});
onTouch.touchend(document, function () {
document.querySelector('#div1').innerHTML = "3";
alert('滑动结束触发');
}, function () {
alert('点击结束触发');
document.querySelector('#div1').innerHTML = "4";
});
onTouch.touchcancel(document, function () {
alert('取消触发');
document.querySelector('#div1').innerHTML = "5";
});
}

window.addEventListener('load',loads, false);

</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航