嗯，我們還需要完成一些事情，才能搞定這個方法。目前，我們已經實現了觸控手勢和滑鼠拖拽。
function addslide(element, options)現在我們來處理返回值。這將是乙個包含能夠登出滑動事件的方法的物件。
return
};
/**
* adds gesture handlers.
* @param element the target element.
* @param options the options.
*/function addslide(element, options)
};// get the element.
var ele = !!element && typeof element === "string" ? document.getelementbyid(element) : element;
if (!ele) return
};// get the minimum moving distances.
var minx = options.minx;
var miny = options.miny;
if (minx == null || minx < 0) minx = 1;
minx = math.abs(minx);
if (miny == null || miny < 0) miny = 1;
miny = math.abs(miny);
// the handler occured after moving.
var moved = function (x, y) else
if (!!options.moveend)
options.moveend(ele, x, y);
};// touch starting event handler.
var start = null;
var touchstart = function (ev) ;
if (!!options.movestart)
options.movestart(ele);
};ele.addeventlistener("touchstart", touchstart, false);
// touch moving event handler.
var touchmove = !!options.moving
? function (ev) ;
options.moving(ele, coor.x, coor.y);
}: null;
if (!!touchmove)
ele.addeventlistener("touchmove", touchmove, false);
// touch ending event handler.
var touchend = function (ev) ;
ele.addeventlistener("touchend", touchend, false);
// mouse event handler.
var mousedown = function (ev) ;
document.body.addeventlistener("mousemove", mousemove, false);
// mouse up event handler.
// need remove all mouse event handlers.
var mouseuphandlers = ;
var mouseup = function (ev) );
};mouseuphandlers.push(
function () ,
function () ,
function (ev)
);document.body.addeventlistener("mouseup", mouseup, false);
};ele.addeventlistener("mousedown", mousedown, false);
// return a disposable object
// for removing all event handlers.
return
};}
現在我們來進行乙個測試。假設有這樣乙個 dom 元素。
#demo_gesture
#demo_gesture > #demo_gesture_fore
當文件元素載入完後，我們執行以下**。
var adjustposition = function (ele, x) ;
addslide("demo_gesture_fore", ,
moveend: function (ele, pos)
});
這個測試頁面創造乙個水平的滑動模組。你也可以用這個創造更多滑動元件出來。
【完】節選翻譯自 msdn 博文slide on web，內容有所調整。
實現監聽左右滑動的事件
package com.cnmobile.beibei.utils import android.content.context import android.view.gesturedetector.ongesturelistener import android.view.gesturedete...
定位網頁元素的解析
一.position屬性定位網頁元素 1.static 預設值，沒有定位。按照標準文件流的方式提現出來 2.relative 相對定位，相對於自身元素原來的位置進行定位 注意 當top的值為正值時向下移動 當為負值時向上移動 當left的值為正值時向右移動 當為負值時向左移動 相對定位的規律 1.設...
js的左右滑動觸屏事件
js的左右滑動觸屏事件，主要有三個事件 touchstart，touchmove，touchend。這三個事件最重要的屬性是 pagex和 pagey,表示x,y座標。touchstart在觸控開始時觸發事件 touchend在觸控結束時觸發事件 touchmove這個事件比較奇怪，按道理在觸控到過...