H5touch事件監聽
<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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章