27th Lesson: Wheel Events, MouseEnter and MouseLeave event repair

Wheel Event

The jquery core library does not deal with the difference of MouseWheel events, but as a common event, this article explains.

MouseWheel event only Firefox browser does not support. MouseWheel The property that is used to get the scroll distance is named Event.wheeldelta, roll up a lap is 120, roll down a lap is-120. Under Ie6-8, window cannot bind MouseWheel event, Opera,safari,chrome can.

Use Dommousescroll to replace the MouseWheel event under Firefox. The property that is used to get the scrolling distance is named Event.detail. Roll up one lap is-3, roll down is 3. When we press and hold the Ctrl,alt,shift key, and then scroll the mouse wheel, the detail value becomes-1 and 1. And while holding down the CTRL key, sliding the scroll wheel also has the function of zooming the page, we can pass Event.axis = = Event. Horizontal_axis or Event.axis = = event. Vertical_axis know whether to scroll horizontally or vertically.

The compatibility scenarios are as follows:

var wheel = function (Obj,callback) {

var wheeltype = "MouseWheel";

try{

Document.createevent ("mousescrollevents"); //Create Dommousescroll event, if it is Firefox will execute, not Firefox, error

Wheeltype = "Dommousescroll";

}catch () {}

Addevent (Obj,wheeltype,function (event) { //) Mouse scrolling event bound to object obj

if ("Wheeldelta" in event) { //unity is 120, where positive numbers are scrolled upward, negative numbers represent scroll down

var delta = Event.wheeldelta;

if (Window.opera && opera.version () <10) { //opera9 series in the opposite direction

Delta =-delta

}

Event.delta = Math.Round (delta)/120; //Early Safari will show floating-point numbers. Why not assign a value to Wheeldelta because the original property of the event object is read-only, so we can only add a custom attribute delta to resolve compatibility issues

}

else if ("detail" in event) { //if it is Firefox

Event.wheeldelta =-event.detail * 40; //Fix the Wheeldelta property of the event, so that the Firefox property is the same as the standard

Event.delta = event.wheeldelta/120; //Add custom properties Delta resolves compatibility issues

}

Callback.call (obj,event); //The Event.delta property value here is compatible with all browsers, the previous lap is 1, and the next lap is-1. While the Event.wheeldelta attribute still has problems in the OPERA9 series and in the early safari, it is normal in other browsers, the last lap is 120, the next lap is- .

})

}

The loading of the wheel Event trigger page is a technical point to be known in the e-commerce field, so be sure to check the entire process before the interview.

MouseEnter and MouseLeave Events

In front-end development, we often encounter the need to hide pop-up layers or drop-down menus. This is the so-called explicit effect. We often use MouseEnter and mouseleave to achieve this. Why not use mouseover and mouseout to achieve it, I say this question: assuming that the pop-up layer has countless descendants of the elements, our mouseout only listen to the top of the pop-up layer of the largest container, we can easily move out of this large container (the mouse moved to a large container of sub-elements, For Mouseout, but actually in the range of the mouse or the large container, it will invalidate the judgment. But MouseLeave will not, only the mouse run to the outside of the large container will trigger, this is because MouseEnter and MouseLeave will not bubble.

However, MouseEnter and MouseLeave events are not supported under the WebKit browser. How to impersonate them in a browser that does not support these two events:

Jquery.each (

{

MouseEnter: "MouseOver",

MouseLeave: "Mouseout"

},

function (orig, fix) { //orig is Mouseenter,fix is mouseover

Jquery.event.special[orig] = { //MouseEnter event treated as special event

Delegatetype:fix, //camouflage MouseEnter with MouseOver

Bindtype:fix,

Handle:function (event) { //This time the event has been fixed

var ret,target = This,handleobj = event.handleobj, related = Event.relatedtarget; //For the MouseOver event, the main goal of the event is to get the element of the cursor, and the related element is the element that loses the cursor. Similarly, for the Mouseout event, the main target of the event is the element that loses the cursor, and the related element is the element that gets the cursor. This property is not supported under IE, this relatedtarget property is fixed when the event is repaired, under IE, when its value is mouseover, it equals fromelement (assuming moving from DIV1 to the target element Div2, Then the fromelement is Div1), at mouseout, equal to toelement (assuming that the target element Div2 moved out to Div1, then Toelement is Div1).

if (!related | | (Related! = = target &&!jquery.contains (target,related))) { //at this time Related=div1,target = Div2, and Div2 does not contain DIV1, is the IF statement executes the callback method, simulates mouseenter,mouseleave. If you move in div2, such as moving to Div2 's child element Div3, this will trigger the Mouseout event of Div2, when Target is Div2,relatedtarget, but target contains Div3, Therefore, the IF statement is not entered, and the problem of mouseover is resolved. It also triggers the Div3 mouseover event and then bubbles to Div2, when Target is div2,relatedtarget and div2, so it does not enter the IF statement.

Event.type = Handleobj.origtype; //The original type of the event, i.e. MouseEnter

ret = handleObj.handler.apply (this,arguments); //Execute callback method

Event.type = fix; ///event repair type, i.e. mouseover

}

return ret;

}

}

}

)

Related also have non-existent cases, for example, from outside the window directly into the DIV2. This makes it possible to achieve the implicit effect through MouseEnter and MouseLeave in all browsers.

Come on!

27th Lesson: Wheel Events, MouseEnter and MouseLeave event repair