Event.wheelDelta возвращает undefined

Итак, я пытаюсь отключить прокрутку на моей странице, когда откроется мой лайтбокс, и я нашел, что это действительно полезно script, что делает именно это. (http://jsfiddle.net/mrtsherman/eXQf3/3/), к сожалению, когда я использую его на своей странице, он отключил прокрутку и в моем лайтбоксе. Я начал отлаживать код с помощью предупреждений, чтобы узнать, что event.wheelDelta возвращает "undefined" на моей странице, а в JSFiddle он возвращает - 120.

Ответ 1

Объект event в обработчике событий jQuery не отражает реальное событие. wheelDelta - это нестандартное свойство события ^{IE и Opera} доступное через свойство originalEvent события jQuery.

В jQuery 1.7+ свойство detail недоступно в объекте события jQuery. Таким образом, вы должны также использовать event.originalEvent.detail для этого свойства в событии DOMMouseScroll. Этот метод обратно совместим со старыми версиями jQuery.

event.originalEvent.wheelDelta

Демо: http://jsfiddle.net/eXQf3/22/
Смотрите также: http://api.jquery.com/category/events/event-object/

Ответ 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));
});

big спасибо to @Mark для jquery-fying функции (:

Ответ 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 здесь: (

Ответ 4

Я пробовал ваше решение, psycho brm, и я изменил функцию extractDelta(e), чтобы она работала в Firefox. Вместо e.detail я использовал e.originalEvent.detail, потому что Firefox возвратил дельта undefined. Я загрузил это решение и свой тестовый код в этот пост. Надеюсь, это поможет.

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;
    }
}