event.wheelDelta返回undefined

Question

所以当我的灯箱打开时,我正试图在我的页面上禁用滚动,我发现这非常有用的脚本就是这样做的.(http://jsfiddle.net/mrtsherman/eXQf3/3/),不幸的是,当我在自己的页面上使用它时,它也禁止在我的灯箱中滚动.我开始使用警报调试代码,但发现event.wheelDelta在我的页面上返回"undefined",而在JSFiddle中,它返回-120.

Answer 1

eventjQuery事件处理程序中的对象不反映真实事件.wheelDelta是一个非标准的事件属性^IE和Opera,可通过originalEventjQuery事件的属性获得.

在jQuery 1.7+中,该detail属性在jQuery Event对象中不可用.因此,您还应该event.originalEvent.detail在DOMMouseScroll活动中使用 此属性.此方法与旧的jQuery版本向后兼容.

event.originalEvent.wheelDelta

演示:http://jsfiddle.net/eXQf3/22/
另见:http://api.jquery.com/category/events/event-object/

Answer 2

$.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);
            }
        });
    });
};

并使用这样的:

$('body').wheel(function (e) {
    e.preventDefault();
    $('#myDiv').append($('<div>').text(e.delta));
});

为了jquery-fying函数,给@Mark做了大事(:

Answer 3

$(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);

});

在Webkit和FF中工作,不能在这里证明IE :(