H5touch事件监听

来源：互联网发布：蛀牙漱口水推荐知乎编辑：程序博客网时间：2024/06/14 20:16

<html lang="en">
<style>
*{ margin:0px; padding:0px; }
body,html{ width:100%; height:100%; }
div#rect{ width:100%; height:100%; background:#f00;}

</style>
</head>
<body>

<div id="rect">
</div>

<script>

(function(){

var LSwiperMaker = function(o){

var that = this;
this.config = o;
this.control = false;
this.sPos = {};
this.mPos = {};
this.dire;
this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);
this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);
this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);

}

LSwiperMaker.prototype.start = function(e){

var point = e.touches ? e.touches[0] : e;
this.sPos.x = point.screenX;
this.sPos.y = point.screenY;
}
LSwiperMaker.prototype.move = function(e){

var point = e.touches ? e.touches[0] : e;
this.control = true;
this.mPos.x = point.screenX;
this.mPos.y = point.screenY;
}

LSwiperMaker.prototype.end = function(e){
this.config.dire_h || (!this.control ? this.dire = null : this.mPos.y > this.sPos.y ? this.dire = 'D' : this.dire = 'U')
if (this.mPos.y - this.sPos.y <=-100) {
alert("message");
};

this.control = false;
this.config.backfn(this);

}

window.LSwiperMaker = LSwiperMaker;
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);// 禁止微信touchmove冲突

}())

var a = new LSwiperMaker({
bind:document.getElementById("rect"), // 绑定的DOM对象
dire_h:false, //true 判断左右， false 判断上下
})

</script>
</body>

</html>

0 0