jQuery 鼠标滚轮事件未在 Firefox 浏览器中触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16788995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
mousewheel event is not triggering in firefox browser
提问by SivaRajini
Please refer the below code.
请参考以下代码。
$(this.element).on("mousewheel", this.chartMouseWheel);
chartMouseWheel:function(e) {
if(e.originalEvent.wheelDelta /120 > 0) {
alert('scrolling up !');
}
else{
alert('scrolling down !');
}
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
},
this event triggering properly in IE,chrome and not triggering in Firefox ?
此事件在 IE、chrome 中正确触发而在 Firefox 中未触发？
采纳答案by Mahmoud Badri
Firefox doesn't recognize "mousewheel" as of version 3. You should use "DOMMouseScroll" instead for firefox.
从版本 3 开始，Firefox 无法识别“鼠标滚轮”。对于 Firefox，您应该使用“DOMMouseScroll”。
check this: http://www.javascriptkit.com/javatutors/onmousewheel.shtml
检查这个：http: //www.javascriptkit.com/javatutors/onmousewheel.shtml
回答by Louis Ameline
This is 2017 and the right answer is now:
这是 2017 年，现在正确的答案是：
$(window).on('wheel', function(event){
// deltaY obviously records vertical scroll, deltaX and deltaZ exist too
if(event.originalEvent.deltaY < 0){
// wheeled up
}
else {
// wheeled down
}
});
Works with current Firefox 51, Chrome 56, IE9+
适用于当前的 Firefox 51、Chrome 56、IE9+
Note:The value of the deltas will depend on the browser and the user settings.
注意：增量值取决于浏览器和用户设置。
回答by Alexander Shutau
Use wheelevent. This page also provides polyfills for old browsers https://developer.mozilla.org/en-US/docs/Web/Events/wheel
使用wheel事件。此页面还为旧浏览器提供了 polyfills https://developer.mozilla.org/en-US/docs/Web/Events/wheel
回答by Razan Paul
Badri is right, you should use "DOMMouseScroll" instead for firefox. Addition to this, for delta you need to use event.originalEvent.detail instead of event.originalEvent.wheelDelta. For down, event.originalEvent.detail gives positive value whereas event.originalEvent.wheelDelta gives negative value and vice versa.
Badri 是对的，你应该使用“DOMMouseScroll”代替 firefox。除此之外，对于增量，您需要使用 event.originalEvent.detail 而不是 event.originalEvent.wheelDelta。对于向下， event.originalEvent.detail 给出正值，而 event.originalEvent.wheelDelta 给出负值，反之亦然。
$(stage.content).on('mousewheel DOMMouseScroll', zoomHelper.zoom);
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
if (event.originalEvent.detail > 0) {
//scroll down
delta = 0.2;
} else {
//scroll up
delta = 0;
}
} else {
if (event.originalEvent.wheelDelta < 0) {
//scroll down
delta = 0.2;
} else {
//scroll up
delta = 0;
}
}
JSFiddle (Works in IE 11, Firefox 33 and Chrome 38, I did not test other browsers): http://jsfiddle.net/rpaul/ckwu7u86/3/
JSFiddle（适用于 IE 11、Firefox 33 和 Chrome 38，我没有测试其他浏览器）：http: //jsfiddle.net/rpaul/ckwu7u86/3/
回答by kdenis
This seems to work in Safari, Chrome, and Firefox (I have not tested it in IE):
这似乎适用于 Safari、Chrome 和 Firefox（我没有在 IE 中测试过）：
// For Chrome
window.addEventListener('mousewheel', mouseWheelEvent);
// For Firefox
window.addEventListener('DOMMouseScroll', mouseWheelEvent);
function mouseWheelEvent(e) {
var delta = e.wheelDelta ? e.wheelDelta : -e.detail;
console.log(delta);
}From: http://www.h3xed.com/programming/javascript-mouse-scroll-wheel-events-in-firefox-and-chrome
来自：http: //www.h3xed.com/programming/javascript-mouse-scroll-wheel-events-in-firefox-and-chrome
回答by Vladimir Georgiev
Or just use the jquery-mousewheeljQuery plugin.
或者只是使用jquery-mousewheeljQuery 插件。
