Javascript event.wheelDelta 返回未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8886281/
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
event.wheelDelta returns undefined
提问by CupOfTea696
So I'm trying to disable scrolling on my page when my lightbox opens, and I found this really usefull script that does exactly that. (http://jsfiddle.net/mrtsherman/eXQf3/3/), unfortunately, when I use it on my own page, it disabled scrolling in my lightbox as well. I started to debug the code with alerts only to find out that event.wheelDelta returns "undefined" on my page, while in the JSFiddle, it returns -120.
所以我试图在我的灯箱打开时禁用我的页面上的滚动，我发现这个非常有用的脚本正是这样做的。（http://jsfiddle.net/mrtsherman/eXQf3/3/），不幸的是，当我在自己的页面上使用它时，它也禁用了我的灯箱中的滚动。我开始使用警报调试代码，结果发现 event.wheelDelta 在我的页面上返回“未定义”，而在JSFiddle 中，它返回 -120。
回答by Rob W
The eventobject in a jQuery event handler does not reflect the real event. wheelDeltais a non-standard event propertyIE and Opera, available through the originalEventproperty of the jQuery event.
eventjQuery 事件处理程序中的对象不反映真实事件。wheelDelta是IE 和 Opera的非标准事件属性，可通过originalEventjQuery 事件的属性获得。
In jQuery 1.7+, the detailproperty is not available at the jQuery Event object. So, you should also use event.originalEvent.detailto for this property at the DOMMouseScrollevent. This method is backwards-compatible with older jQuery versions.
在 jQuery 1.7+ 中，该detail属性在 jQuery 事件对象中不可用。因此，您还应该event.originalEvent.detail在DOMMouseScroll活动中使用 to 来表示此属性。此方法向后兼容旧的 jQuery 版本。
event.originalEvent.wheelDelta
Demo: http://jsfiddle.net/eXQf3/22/
See also: http://api.jquery.com/category/events/event-object/
演示：http: //jsfiddle.net/eXQf3/22/
另见：http: //api.jquery.com/category/events/event-object/
回答by psycho brm
$.fn.wheel = function (callback) {
return this.each(function () {
$(this).on('mousewheel DOMMouseScroll', function (e) {
e.delta = null;
if (e.originalEvent) {
if (e.originalEvent.wheelDelta) e.delta = e.originalEvent.wheelDelta / -40;
if (e.originalEvent.deltaY) e.delta = e.originalEvent.deltaY;
if (e.originalEvent.detail) e.delta = e.originalEvent.detail;
}
if (typeof callback == 'function') {
callback.call(this, e);
}
});
});
};
and use like this:
并像这样使用：
$('body').wheel(function (e) {
e.preventDefault();
$('#myDiv').append($('<div>').text(e.delta));
});
big thx to @Mark for jquery-fying the function (:
非常感谢@Mark 用于 jquery-fying 函数（：
回答by Ol Sen
$(this).on('mousewheel DOMMouseScroll', function(e){
var dat = $(e.delegateTarget).data(); //in case you have set some, read it here.
var datx = dat.x || 0; // just to show how to get specific out of jq-data object
var eo = e.originalEvent;
var xy = eo.wheelDelta || -eo.detail; //shortest possible code
var x = eo.wheelDeltaX || (eo.axis==1?xy:0);
var y = eo.wheelDeltaY || (eo.axis==2?xy:0); // () necessary!
console.log(x,y);
});
works in Webkit and FF, can not proof IE here :(
适用于 Webkit 和 FF，无法在此处证明 IE :(
回答by Timbergus
I have tried your solution, psycho brm, and I have changed the function extractDelta(e)to make it works in Firefox. Instead of e.detailI have used e.originalEvent.detailbecause Firefox returned an undefined delta. I have uploaded the solution and my test code to this post. I hope it helps.
我已经尝试了您的解决方案Psycho brm，并且我已经更改了该功能extractDelta(e)以使其在 Firefox 中工作。而不是e.detail我使用，e.originalEvent.detail因为 Firefox 返回了一个未定义的增量。我已将解决方案和我的测试代码上传到这篇文章。我希望它有帮助。
function extractDelta(e) {
if (e.wheelDelta) {
return e.wheelDelta;
}
if (e.originalEvent.detail) {
return e.originalEvent.detail * -40;
}
if (e.originalEvent && e.originalEvent.wheelDelta) {
return e.originalEvent.wheelDelta;
}
}
回答by Mavelo
When I need WheelDelta, I pass the event along to this little gem...
当我需要 WheelDelta 时，我会将事件传递给这个小宝石......
function getWheelDelta(event) {
return event.wheelDelta || -event.detail || event.originalEvent.wheelDelta || -event.originalEvent.detail || -(event.originalEvent.deltaY * 25) || null;
}
Example jQuery where I used it to obtain the delta for scrolling elements with the overflow:hiddenCSS rule...
示例 jQuery，我使用它来获取使用overflow:hiddenCSS 规则滚动元素的增量...
$('#parent-id').on('wheel mousewheel DOMMouseScroll', function(event) {
var node = $('#child-id');
node.prop('scrollTop', parseFloat(node.prop('scrollTop')) - (getWheelDelta(event) / 2));
return false;
});
Note: Reverse scroll direction by adding delta instead of subtracting like example above.
注意：通过添加增量而不是像上面的示例那样减去来反转滚动方向。
