最近公司開(kāi)發(fā)手機(jī)網(wǎng)站，本人主要負(fù)責(zé)前端這塊的工作，考慮到j(luò)query腳本庫(kù)體質(zhì)大的問(wèn)題，選擇用Zepto腳本框架，對(duì)于手機(jī)網(wǎng)站，滑動(dòng)屏幕事件是頻繁用到的，所以經(jīng)過(guò)一小段時(shí)間的研究，本人做了一個(gè)基于Zepto.js的插件，主要是對(duì)手機(jī)網(wǎng)站 上劃，下滑，左劃，右滑事件的封裝。具體代碼如下：

(function($) {

$.fn.touchwipe = function(settings) {

var config = {

min_move_x: 50,

min_move_y: 20,

wipeLeft: function() { },

wipeRight: function() { },

wipeUp: function() { },

wipeDown: function() { },

preventDefaultEvents: false

};

if (settings) $.extend(config, settings);

this.each(function() {

var startX;

var startY;

var isMoving = false;

var directionLocked = null;

function cancelTouch() {

this.removeEventListener('touchmove', onTouchMove);

startX = null;

isMoving = false;

directionLocked = false;

}

function onTouchMove(e) {

if(config.preventDefaultEvents) {

e.preventDefault();

}

if(isMoving) {

var x = e.changedTouches ? e.changedTouches[0].clientX: e.clientX;

var y = e.changedTouches ? e.changedTouches[0].clientY: e.clientY;

var dx = startX - x;

var dy = startY - y;

var absDistX = Math.abs(dx);

var absDistY = Math.abs(dy);

if (directionLocked === "y") {

return

} else {

if (directionLocked === "x") {

e.preventDefault()

} else {

absDistX = Math.abs(dx);

absDistY = Math.abs(dy);

if (absDistX < 4) {

return

}

if (absDistY > absDistX ) {

dx = 0;

directionLocked = "y";

return

} else {

e.preventDefault();

directionLocked = "x"

}

}

}

if(absDistX >= config.min_move_x) {

cancelTouch();

if(dx > 0) {

config.wipeLeft();

}

else {

config.wipeRight();

}

}

}

}

function onTouchStart(e)

{

if (e.touches.length == 1) {

startX = e.changedTouches ? e.changedTouches[0].clientX: e.clientX;

startY = e.changedTouches ? e.changedTouches[0].clientY: e.clientY;

isMoving = true;

directionLocked = false;

this.addEventListener('touchmove', onTouchMove, false);

}

}

if ('ontouchstart' in document.documentElement) {

this.addEventListener('touchstart', onTouchStart, false);

}

});

return this;

};

})(Zepto);

更多信息請(qǐng)查看IT技術(shù)專欄