Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to realize the mouse wheel event and Mac trackpad double finger event". In daily operation, I believe many people have doubts about how to realize the mouse wheel event and Mac trackpad double finger event. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to realize the mouse wheel event and Mac trackpad double finger event". Next, please follow the editor to study!

1. Which event to use

The wheel event fires when the user rotates a wheel button on a pointing device (typically a mouse). This event replaces the non-standard deprecated mousewheel event.

The previously commonly used mousewheel event has been gradually abandoned by the authorities and replaced by the wheel event, so here we will give priority to the use of wheel and be backward compatible.

In addition, even for wheel events, the performance of each browser may be different, each browser has its own specification, and there is no official standard, although I don't know why.

two。 Compatible writing method

/ creates a global "addWheelListener" method// example: addWheelListener (elem, function (e) {console.log (e.deltaY); e.preventDefault ();}); (function (window,document) {var prefix = "", _ addEventListener, onwheel, support; / / detect event model if (window.addEventListener) {_ addEventListener = "addEventListener";} else {_ addEventListener = "attachEvent"; prefix = "on") } / / detect available wheel event support = "onwheel" in document.createElement ("div")? "wheel": / / all manufacturers' high-version browsers support "wheel" _ document.onmousewheel! = = undefined? "mousewheel": / / Webkit and IE must support "mousewheel" and "DOMMouseScroll"; / / lower versions firefox window.addWheelListener = function (elem, callback, useCapture) {_ addWheelListener (elem, support, callback, useCapture); / / handle MozMousePixelScroll in older Firefox if (support = = "DOMMouseScroll") {_ addWheelListener (elem, "MozMousePixelScroll", callback, useCapture);}} Function _ addWheelListener (elem, eventName, callback, useCapture) {elem [_ addEventListener] (prefix + eventName, support = = "wheel"? Callback: function (originalEvent) {! originalEvent & & (originalEvent = window.event) / / create a normalized event object var event = {/ / keep a ref to the original event object originalEvent: originalEvent, target: originalEvent.target | | originalEvent.srcElement, type: "wheel", deltaMode: originalEvent.type = = "MozMousePixelScroll"? 0: 1, deltaX: 0, deltaZ: 0 PreventDefault: function () {originalEvent.preventDefault? OriginalEvent.preventDefault (): originalEvent.returnValue = false;}}; / / calculate deltaY (and deltaX) according to the event if (support = = "mousewheel") {event.deltaY =-1Comp40 * originalEvent.wheelDelta / / Webkit also support wheelDeltaX originalEvent.wheelDeltaX & & (event.deltaX =-1ax 40 * originalEvent.wheelDeltaX);} else {event.deltaY = originalEvent.detail;} / / it's time to fire the callback return callback (event);}, useCapture | | false);}}) (window,document)

This is the recommended compatible writing on MDN, and you can see that the order of these events is wheel > mousewheel > DOMMouseScroll. If you use the wheel event, event does not handle it. Otherwise, the event is reencapsulated.

3. Direction judgment

Mouse wheel, only up and down two directions, but if it is the two-finger behavior of the touchpad, in addition to the top and bottom, there are left and right directions, and double pointing inward contraction, outward expansion of four cases, and then, to judge and deal with these situations.

Function wheelEvent (e) {if (Math.abs (e.deltaX)! = = 0 & & Math.abs (e.deltaY)! = = 0) return console.log ('no fixed direction'); if (e.deltaX

0) return console.log ('left'); if (e.ctrlKey) {if (e.deltaY > 0) return console.log ('inward'); if (e.deltaY

0) return console.log ('up'); if (e.deltaY < 0) return console.log ('down');}}

After testing, delta is the best value used to judge the direction, and both wheelDelta and detail have their own compatibility and other problems.

DeltaX is sliding in the left and right direction and deltaY is in the up and down direction.

Shrinking inward is the same as scrolling down, and expanding outward is the same as scrolling upward. This is a normal user habit, but the trouble is that the fact is just the opposite of our habit, so it is indistinguishable to rely solely on deltaY.

It has been tested that the ctrlKey field will be true only if the two fingers are not in the same direction. In this way, it can be distinguished, resulting in six situations, which are dealt with one by one.

So the above compatible method also needs to return ctrlKey.

CtrlKey: originalEvent.ctrlKey | | false

This problem is solved, and then I will take the time to sort out the code of the K-diagram.

At this point, the study on "how to realize the mouse wheel event and Mac trackpad double finger event" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.