原生JavaScript實現監聽移動端上下左右滑動事件
阿新 • • 發佈:2018-11-21
/** * @author W.Dong * @date 2018/10/26 * @Description: 監聽觸控的方向 */ var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) element.addEventListener(type, handler, false); else if (element.attachEvent) element.attachEvent("on" + type, handler); else element["on" + type] = handler; }, removeHandler: function (element, type, handler) { if (element.removeEventListener) element.removeEventListener(type, handler, false); else if (element.detachEvent) element.detachEvent("on" + type, handler); else element["on" + type] = handler; }, /** * @param target 要繫結監聽的目標元素 * @param isPreventDefault 是否遮蔽掉觸控滑動的預設行為(例如頁面的上下滾動,縮放等) * @param upCallback 向上滑動的監聽回撥(若不關心,可以不傳,或傳false) * @param rightCallback 向右滑動的監聽回撥(若不關心,可以不傳,或傳false) * @param downCallback 向下滑動的監聽回撥(若不關心,可以不傳,或傳false) * @param leftCallback 向左滑動的監聽回撥(若不關心,可以不傳,或傳false)*/ listenTouchDirection: function (target, isPreventDefault, upCallback, rightCallback, downCallback, leftCallback) { this.addHandler(target, "touchstart", handleTouchEvent); this.addHandler(target, "touchend", handleTouchEvent); this.addHandler(target, "touchmove", handleTouchEvent); var startX; var startY; function handleTouchEvent(event) { switch (event.type) { case "touchstart": startX = event.touches[0].pageX; startY = event.touches[0].pageY; break; case "touchend": var spanX = event.changedTouches[0].pageX - startX; var spanY = event.changedTouches[0].pageY - startY; if (Math.abs(spanX) > Math.abs(spanY)) { //認定為水平方向滑動 if (spanX > 30) { //向右 if (rightCallback) { rightCallback(); console.log("right"); } } else if (spanX < -30) { //向左 if (leftCallback) { leftCallback(); console.log("left"); } } } else { //認定為垂直方向滑動 if (spanY > 30) { //向下 if (downCallback) { downCallback(); console.log("down"); } } else if (spanY < -30) {//向上 if (upCallback) { upCallback(); console.log("up"); } } } break; case "touchmove": //阻止預設行為 if (isPreventDefault) event.preventDefault(); break; } } } }; //使用的時候很簡單,只需要向下面這樣呼叫即可 // 其中下面監聽的是整個DOM // up, right, down, left為四個回撥函式,分別處理上下左右的滑動事件 EventUtil.listenTouchDirection(document, true, up, right, down, left);