Onmousewheel event in Javascript

I believe that when you browse Google Map, you will notice that you can scroll up or down the mouse to zoom in or out the Map. In fact, we are no stranger to mouse scrolling. However, to bind a mouse scroll event to an element, we need to have a detailed understanding of the event.

How does the browser support this event? IE6, Opera9 +, Safari2 +, and Firefox1 + all support the "onmousewheel" event. In FF 3.x, it is equivalent to the "DOMMouseScroll" event. "Onmousewheel" is used as the event name and is not recognized by it. Therefore, to ensure that each browser can run, you need to bind different events to different browsers.

Copy to ClipboardReference: [www.bkjia.com] var mousewheelevt = (/Firefox/I. test (navigator. userAgent ))? "DOMMouseScroll": "mousewheel" // FF doesn' t recognize mousewheel as of FF3.x
If (obj. attachEvent) // if IE (and Opera depending on user setting)
Obj. attachEvent ("on" + mousewheelevt, handler, useCapture );
Else if (obj. addEventListener) // WC3 browsers
Document. addEventListener (mousewheelevt, function (e) {alert ('mouse wheel movement detected! ')}, False)

The code above binds the mousewheel event to the document and runs it in all browsers. But how much does the mouse scroll every time it moves up or down? When this event is triggered, in the non-FF browser, the distance recorded is "wheelDelta", which always returns a multiple of 120 (120 indicates that the mouse scrolls up, -120 indicates that the mouse is scroll down ). In FF, the rolling distance is recorded as the "detail" attribute, and it returns a multiple of 3 (3 indicates that the mouse is scroll down, and-3 indicates that the mouse is scroll up ).

It should be noted that when Opera responds to the "onmousewheel" event, it also has the "wheelDelta" and "detail" attributes. The value returned by its "detail" attribute is the same as that returned by FF. Therefore, the "detail" attribute should be used for Opera to scroll the mouse distance. When a rolling event is triggered, I want to get an integer of 1 or-1. Through the above analysis, we can easily get the value we want. For "wheelDelta", we only need to divide it by 120. For "detail", we can divide it by 3.

Copy to ClipboardReference: [www.bkjia.com] function displayDelta (e ){
Var evt = window. event | e;
Var delta = evt. detail? -Evt. detail/3: evt. wheelDelta/120;
Return delta;
} With the above analysis, we can build our own function to bind a mousewheel event to an object. That is: Copy to ClipboardReference: [www.bkjia.com] function wheel (obj, fn, useCapture ){
Var mousewheelevt = (/Firefox/I. test (navigator. userAgent ))? "DOMMouseScroll": "mousewheel" // FF doesn' t recognize mousewheel as of FF3.x
If (obj. attachEvent) // if IE (and Opera depending on user setting)
Obj. attachEvent ("on" + mousewheelevt, handler, useCapture );
Else if (obj. addEventListener) // WC3 browsers
Obj. addEventListener (mousewheelevt, handler, useCapture );

Function handler (event ){
Var delta = 0;
Var event = window. event | event;
Var delta = event. detail? -Event. detail/3: event. wheelDelta/120;
If (event. preventDefault)
Event. preventDefault ();
Event. returnValue = false;
Return fn. apply (obj, [event, delta]);
}

}

At the time of writing this article, jQuery has developed the jquery. mousewheel plug-in. Using this plug-in can easily bind a mousewheel event to an object without too much code.

Demonstration in this article: Click to view

Article