A brief discussion on Mousewheel events_javascript skills-JS Tutorial-php.cn

A brief discussion on Mousewheel events_javascript skills

WBOY

Release： 2016-05-16 18:19:37

Original

1263 people have browsed it

In fact, most browsers (IE6, IE7, IE8, Opera 10, Safari 5) provide the "mousewheel" event. Unfortunately, Firefox 3.5 does not support this event. Fortunately, Firefox 3.5 provides another equivalent event: "DOMMouseScroll" (a test case for events and event properties).

<h1>Mousewheel Event in JavaScript</h1>
<ol>
<li>IE6, IE7, IE8, Opera 10, Safari 5 support mousewheel.</li>
<li>Firefox 3.5 supports DOMMouseScroll.</li>
<li>IE6, IE7, IE8, Opera 10, Safari 5 support event.wheelDelta. </li>
<li>Firefox 3.5, Opera 10 support event.detail.</li>
<li>The event.wheelDelta value is a multiple of 120. </li>
<li>The event.detail value is a multiple of 3.</li>
</ol>
<div id="J_Box01" class="box">Mousewheel Event: mousewheel</div>
<div id="J_Box02" class="box">Mousewheel Event: DOMMouseScroll </div>
<p id="J_Result" class="result"></p>
<p>Related Articles: <a href="http://www.planabc.net/2010/08/12/mousewheel_event_in_javascript/">http://www.planabc.net/2010/08/12/mousewheel_event_in_javascript/</a></p>

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

OK, we now know To account for the implementation differences between different browsers, the compatible code is as follows:

Copy code

The code is as follows:

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

Let’s go back to the interactive effect to be achieved. Now there are some other problems that need to be solved:
1. Should the page font be enlarged or reduced? ==> Does the mouse wheel scroll up or down?
2. What is the multiple of page font scaling? ==> What is the scrolling range of the mouse wheel?
Fortunately, we can get this information through some attribute values of the event:
1. "event.wheelDelta" attribute value in the "mousewheel" event: the returned value, if it is a positive value, it means that the wheel is up Scroll, if it is a negative value, it means that the wheel is scrolling downward; the returned values are all multiples of 120, that is: amplitude = returned value / 120.
2. "event.detail" attribute value in the "DOMMouseScroll" event: the returned value. If it is a negative value, it means that the wheel is scrolling upward (just the opposite of "event.wheelDelta"). If it is a positive value, it means that the wheel is scrolling upward. Scroll down; the returned values are all multiples of 3, that is: amplitude = returned value/3.
3. The “mousewheel” event is a special case in Opera 10. It has both the “event.wheelDelta” attribute and the “event.detail” attribute.
Note: For the third point above, there is this comment in the article "The onmousewheel event of JavaScript":

Copy code

The 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. 

Copy code The code is as follows:

 
var addEvent = ( function(){ 
if (window.addEventListener) { 
return function(el, sType, fn, capture) { 
el.addEventListener(sType, fn, (capture)); 
}; 
} else if (window.attachEvent) { 
return function(el, sType, fn, capture) { 
el.attachEvent("on" sType, fn); 
}; 
 } else { 
return function(){}; 
} 
})(), 
stopEvent: function(event) { 
if (event.stopPropagation) { 
event. stopPropagation(); 
} else { 
event.cancelBubble = true; 
} 
if (event.preventDefault) { 
event.preventDefault(); 
} else { 
event.returnValue = 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 the element of Mousewheel event 
addEvent(object, mousewheel, function(event){ 
var delta = 0; 
event = window.event || event; 
stopEvent(event); 
delta = event.wheelDelta ? (event.wheelDelta / 120) : (- event.detail / 3 ; 