以下是如何实现您自己的车轮停止事件。

//initialise the new variables

var wheelMap = new Map;

var deltaXEnded = false;

var deltaYEnded = false;

var previousSwipe = Object;

previousSwipe.timeStamp = 0;

previousSwipe.deltaX = 0;

previousSwipe.deltaY = 0;

var wheelstart = false;

为创建新的事件侦听器

车轮止动器

事件

我们将从

NormalWheelEventCallbackFunction()。

var wheelstop = new Event("wheelstop");

接下来,我们将在调度此事件的情况下定义回调,然后将事件添加到窗口对象。

function wheelstopcallback(event){

wheelstart = false;

console.log("wheel event has ended");

}

window.addEventListener("wheelstop", wheelstopcallback.bind(this));

现在我们定义了普通的车轮事件监听器以及这个监听器将使用的回调…

window.addEventListener("wheel", normalWheelEventCallbackFunction.bind(this));

车轮事件回调函数

function normalWheelEventCallbackFunction(event){

if(previousSwipe.timeStamp !== 0){

if(event.timeStamp - previousSwipe.timeStamp < 1000)

wheelMap.set(event.timeStamp, event);

else

wheelMap.clear();

}

else{previousSwipe.timeStamp = event.timeStamp;}

if(event.deltaX > 2 && event.deltaX > previousSwipe.deltaX){

//forward

wheelstart = true

}

else if(event.deltaX < -2&& event.deltaX < previousSwipe.deltaX){

//backward

wheelstart = true;

}

else if(event.deltaY > 2 && event.deltaY > previousSwipe.deltaY){

wheelstart = true;

}

else if(event.deltaY < 2 && event.deltaY < previousSwipe.deltaY){

wheelstart = true;

}

if(

((event.deltaX === 1 || event.deltaX === 0 || event.deltaX === -1) && ((event.deltaX > 0 && event.deltaX < previousSwipe.deltaX) || (event.deltaX < 0 && event.deltaX > previousSwipe.deltaX)) && wheelstart)

|| (wheelstart && (event.deltaX === 0 && previousSwipe.deltaX === 0))

)

{

deltaXEnded = true;

console.log("deltaXEnded");

}

if(

(((event.deltaY === 1 || event.deltaY === 0 || event.deltaY === -1) && ((event.deltaY > 0 && event.deltaY < previousSwipe.deltaY) || (event.deltaY < 0 && event.deltaY > previousSwipe.deltaY))) && wheelstart)

|| (wheelstart && (event.deltaY === 0 && previousSwipe.deltaY === 0))) {

deltaYEnded = true;

console.log("deltaYEnded");

}

if(deltaXEnded && deltaYEnded){

deltaXEnded = false;

deltaYEnded = false;

window.dispatchEvent(wheelstop);

}

previousSwipe.deltaX = event.deltaX;

previousSwipe.deltaY = event.deltaY;

}

这可能有一些错误,但在大多数情况下,逻辑是相当合理的,我建议您回退,但是如果您需要捕获每一个发送的单轮事件,因为它可能在发送“车轮停止”事件后有一些。

最后,确保并实现一个处理程序,如果它被click事件中断,从而结束wheel事件…

function wheelstopdispatch(){

if(wheelstart)

window.dispatchEvent(wheelstop);

}

window.addEventListener("click", wheelstopdispatch);