A brief discussion on the Mousewheel incident

In fact, the "mousewheel" event is provided in most browsers (IE6, IE7, IE8, Opera 10+, Safari 5+). But the one that contains Firefox 3.5+ does not support this event, but thankfully, Firefox 3.5+ provides another equivalent event: "DOMMouseScroll" (test case of event and event attributes).

[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]

OK, we have now known the difference in implementations between different browsers, and the compatible code is as follows:

Copy the codeThe code is as follows:

 
var addEvent = (function(){ 
if () { 
return function(el, sType, fn, capture) { 
(sType, fn, (capture)); 
}; 
} else if () { 
return function(el, sType, fn, capture) { 
("on" + sType, fn); 
}; 
} else { 
return function(){}; 
} 
})(), 
// isFirefox is pseudo-code, you can implement it yourself
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel"; 
// object is also a pseudo-code, you need to register the elements of the Mousewheel event
addEvent(object, mousewheel, function(event){ 
event =  || event; 
// todo something 
}, false); 

Let's go back to the interaction effect we want to achieve, and now there are some other problems that need to be solved:
1. Is the page font enlarged or reduced? ==> Should the mouse wheel scroll up or down?
2. What is the multiple of the page font scaling? ==> What is the amplitude of the mouse wheel scrolling?
Fortunately, we can get this information through some properties of the event:
1. The "" attribute value in the "mousewheel" event: The returned value. If it is a positive value, it means the scroll wheel is scrolling up. If it is a negative value, it means the scroll wheel is scrolling down; the returned values are all multiples of 120, that is: amplitude size = the returned value / 120.
2. "DOMMouseScroll" event "" attribute value: the returned value. If it is a negative value, it means the scroll wheel is scrolling upward (it is exactly the opposite of ""). If it is a positive value, it means the scroll wheel is scrolling downward; the returned values are all multiples of 3, that is: amplitude size = the returned value / 3.
3. The "mousewheel" event is a special case in Opera 10+, with both the "" attribute and the "" attribute.
Note: The third point above is annotated in the article "The onmousewheel event of JavaScript":

Copy the codeThe code is as follows:

 
In Opera, “detail” returns the same value as it does in FF, so for the big O you should rely on “detail” instead of “wheelDelta”, which depending on the Opera version may return a different value than in IE's. 

However, after testing, the properties in Opera 9+ and Opera 10+ are exactly the same as those in other browsers, and no exceptions or errors are found. From an interface perspective, the "" attribute should be used in the code first.
The code is as follows:

Copy the codeThe code is as follows:

 
var addEvent = (function(){ 
if () { 
return function(el, sType, fn, capture) { 
(sType, fn, (capture)); 
}; 
} else if () { 
return function(el, sType, fn, capture) { 
("on" + sType, fn); 
}; 
} else { 
return function(){}; 
} 
})(), 
stopEvent: function(event) { 
if () { 
(); 
} else { 
 = true; 
} 
if () { 
(); 
} else { 
 = false; 
} 
}, 
zoomIn = function(){}, 
zoomOut = function(){}, 
// isFirefox is pseudo-code, you can implement it yourself
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel"; 
// object is pseudo-code, you need to register elements of the Mousewheel event
addEvent(object, mousewheel, function(event){ 
var delta = 0; 
event =  || event; 
stopEvent(event); 
delta =  ? ( / 120) : (-  / 3); 
// zoomIn, zoomOut is a pseudo-code that needs to be implemented
delta > 0 ? zoomIn(delta): zoomOut((delta)); 
} , false); 