Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "the method of judging and applying the mouse wheel event in javascript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

IE 6.0first implemented the mousewheel event. Since then, Opera, Chrome, and Safari have all implemented this event. The mousewheel event is triggered when the user interacts with the page through the mouse wheel and scrolls the page vertically (either up or down). This event can be triggered on any element and eventually bubbles to document (IE8) or window (IE9, Opera, Chrome, and Safari) objects. The event object corresponding to the mousewheel event contains a special wheelDelta property in addition to all the standard information about the mouse event. WheelDelta is a multiple of 120 when the user scrolls the mouse wheel forward, and wheelDelta is a multiple of 120 when the user scrolls the mouse wheel backward. This attribute is shown in the figure.

You can handle mouse wheel interaction by assigning a mousewheel event handler to any element or document object in the page. Let's look at the following example.

EventUtil.addHandler (document, "mousewheel", function (event) {

Event = EventUtil.getEvent (event)

Alert (event.wheelDelta)

});

This example displays the value of wheelDelta when the mousewheel event occurs. In most cases, it is enough to know the direction of the mouse wheel, which can be determined by detecting the plus or minus sign of the wheelDelta. One thing to note: in versions prior to Opera 9.5, the sign of the wheelDelta value was reversed. If you plan to support earlier versions of Opera, you will need to use browser detection techniques to determine the actual values, as shown in the following example.

EventUtil.addHandler (document, "mousewheel", function (event) {

Event = EventUtil.getEvent (event)

Var delta = (client.engine.opera & & client.engine.opera < 9.5?-event.wheelDelta: event.wheelDelta)

Alert (delta)

});

The complete code is as follows. For the client.js and EventUtil.js involved, please see the download address on the page:

MouseWheel Event Example

Try scrolling your mouse wheel (IE, Safari, and Opera).

EventUtil.addHandler (document, "mousewheel", function (event) {

Event = EventUtil.getEvent (event)

Var delta = (client.engine.opera & & client.engine.opera < 9.5?-event.wheelDelta: event.wheelDelta)

Alert (delta)

});

The above code uses the client object created earlier to detect whether the browser is an earlier version of Opera.

Because the mousewheel event is very popular and supported by all browsers, HTML 5 also adds this event.

Firefox supports a similar event called DOMMouseScroll, which is also triggered when the mouse wheel is scrolled. Like the mousewheel event, DOMMouseScroll is considered a mouse event and therefore contains all the properties related to the mouse event. Information about the mouse wheel is stored in the detail property, which is a multiple of-3 when the mouse wheel is scrolled forward and a multiple of 3 when the mouse wheel is scrolled backward. This attribute is shown in the figure.

You can add a DOMMouseScroll event to any element in the page, and the event bubbles to the window object. Therefore, you can add event handlers for this event as follows.

EventUtil.addHandler (window, "DOMMouseScroll", function (event) {

Event = EventUtil.getEvent (event)

Alert (event.detail)

});

This simple event handler displays the value of the detail property as the mouse wheel scrolls. To give a solution in a cross-browser environment, the first step is to create a square that can get the mouse wheel increment (delta). Here is the method we added to the EventUtil object.

Var EventUtil = {

/ / other codes have been omitted

GetWheelDelta: function (event) {

If (event.wheelDelta) {

Return (client.engine.opera & & client.engine.opera < 9.5?-event.wheelDelta: event.wheelDelta)

} else {

Return-event.detail * 40

}

}

/ / other codes have been omitted}

Here, the getWheelDelta () method first detects whether the event object contains a wheelDelta property, and if so, determines the correct value through the viewer detection code. If wheelDelta does not exist, it is assumed that the corresponding value is stored in the detail property. Because the value of Firefox is different, you need to reverse the symbol of this value first, and then multiply it by 40 to ensure that the value is the same as that of other browsers. With this method in place, you can assign the same event handlers to the mousewheel and DOMMouse- Scroll events, for example:

(function () {

Function handleMouseWheel (event) {

Event = EventUtil.getEvent (event)

Var delta = EventUtil.getWheelDelta (event)

Alert (delta)

}

EventUtil.addHandler (document, "mousewheel", handleMouseWheel)

EventUtil.addHandler (document, "DOMMouseScroll", handleMouseWheel)

) ()

We put the relevant code in a private scope so that the newly defined function does not interfere with the global scope. The handleMouseWheel () function defined here can be used as a handler for two events (if the specified event does not exist, the code that specifies the handler for that event silently fails). Due to the use of the EventUtil.getWheelDelta () method, the event handler function we defined can be applied in any case.

This is the end of the content of "the method of judging and applying the mouse wheel event in javascript". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.