//封装touch触摸事件 --- DOM2级、单点触控 if (!Object.prototype.addTouchEvents) { Object.defineProperty(Object.prototype, ‘addTouchEvents‘, { value: function(Obj) { var noop = function() {}; var defaults = { start: noop, //开始 move: noop, //移动 end: noop, //结束 left: noop, //结束(向左) right: noop, //结束(向右) top: noop, //结束(向上) down: noop, //结束(向下) long: noop, //结束(长按) click: noop, //结束(点击) x: 380, //触发 left || right 的界值 (px) y: 380, //触发 top || down 的界值 (px) speed: 180, //触发 left || right || top || down 的界值 (px/0.3s) isPropagate: true //是否传播 }; var Params = {}; for (var p in defaults) { if (defaults.hasOwnProperty(p)) { if (Obj[p] === false || Obj[p] === 0) { Params[p] = Obj[p]; } else { Params[p] = Obj[p] || defaults[p]; } } } var StartX, StartY, StartTime; var Change = {}; this.addEventListener(‘touchstart‘, function(e) { if (!Params.isPropagate) e.stopPropagation(); if (e.targetTouches.length === 1) { StartX = e.targetTouches[0].pageX; StartY = e.targetTouches[0].pageY; StartTime = new Date().getTime(); Change.x = 0; Change.y = 0; Params.start(e, Change); } }, false); this.addEventListener(‘touchmove‘, function(e) { e.preventDefault(); if (!Params.isPropagate) e.stopPropagation(); if (e.targetTouches.length === 1) { Change.x = e.targetTouches[0].pageX - StartX; Change.y = e.targetTouches[0].pageY - StartY; Params.move(e, Change); } }, false); this.addEventListener(‘touchend‘, function(e) { if (!Params.isPropagate) e.stopPropagation(); if (e.targetTouches.length === 0) { Params.end(e, Change); var changeTime = new Date().getTime() - StartTime, abcChangeX = Math.abs(Change.x), abcChangeY = Math.abs(Change.y), speedX = abcChangeX / (changeTime / 300), speedY = abcChangeY / (changeTime / 300); if (abcChangeX > abcChangeY && (abcChangeX > Params.x || speedX > Params.speed)) { if (Change.x < 0) { Params.left(e, Change); } else { Params.right(e, Change); } } else if (abcChangeY > abcChangeX && (abcChangeY > Params.y || speedY > Params.speed)) { if (Change.y < 0) { Params.top(e, Change); } else { Params.down(e, Change); } } else if (abcChangeX < 5 && abcChangeY < 5) { if (changeTime > 300) { Params.long(e, Change); } else { Params.click(e, Change); } } } }, false); } }); } //使用情况 div.addTouchEvents({ start: function(e, change) { console.log(‘‘); console.log(‘开始‘); }, move: function(e, change) { console.log(‘移动‘); }, end: function(e, change) { console.log(‘结束 ‘ + JSON.stringify(change)); }, left: function(e, change) { console.log(‘向左‘); }, right: function(e, change) { console.log(‘向右‘); }, top: function(e, change) { console.log(‘向上‘); }, down: function(e, change) { console.log(‘向下‘); }, long: function(e, change) { console.log(‘长按‘); }, click: function(e, change) { console.log(‘点击‘); }, x: 380, //触发 left || right 的界值 (px) y: 380, //触发 top || down 的界值 (px) speed: 180, //触发 left || right || top || down 的界值 (px/0.3s) isPropagate: true //是否传播 });
时间: 2024-07-30 13:52:45