Привязка к колесу прокрутки, когда над div

Я создаю редактор изображений в браузере, и у меня есть код для всех моих элементов управления. Теперь я хотел бы отобразить горячие клавиши и кнопки мыши. Клавиатура проста, но мышь не работает.

Мне нужно определить, когда мышь находится над div холста и когда колесо мыши перемещено над ним. Мышь над частью не сложна, ее привязка к колесу мыши, с которой у меня возникают проблемы.

Я пробовал jQuery.scroll, но чтобы работать только в том случае, если под div под колесом установлена ​​прокрутка. Мой canvas - нет. Это смещение контролируется с помощью моих сценариев.

Примечания:

  • Я использую jQuery в качестве базы.
  • Я не прокручиваю все что угодно, я пытаюсь привязать и событие к колесу прокрутки без прокрутки.

Структура

<div id="pageWrap">
    [page head stuff...]
    <div id="canvas">
        [the guts of the canvas go here; lots of various stuff...]
    <div>
    [page body and footer stuff...]
</div>

Ответы

Ответ 1

Важное обновление 01/2015 - приостановлено событие mousewheel:

Тем временем mousewheel событие устарело и заменено на wheel.

MDN Docs для mousewheel говорят:

Не используйте это событие колеса.

Этот интерфейс нестандартен и устарел. Он использовался только в браузерах, отличных от Gecko. Вместо этого используйте стандартное событие колеса.


Теперь вы должны использовать что-то вроде:

// This function checks if the specified event is supported by the browser.
// Source: http://perfectionkills.com/detecting-event-support-without-browser-sniffing/
function isEventSupported(eventName) {
    var el = document.createElement('div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in el);
    if (!isSupported) {
        el.setAttribute(eventName, 'return;');
        isSupported = typeof el[eventName] == 'function';
    }
    el = null;
    return isSupported;
}

$(document).ready(function() {
    // Check which wheel event is supported. Don't use both as it would fire each event 
    // in browsers where both events are supported.
    var wheelEvent = isEventSupported('mousewheel') ? 'mousewheel' : 'wheel';

    // Now bind the event to the desired element
    $('#foo').on(wheelEvent, function(e) {
        var oEvent = e.originalEvent,
            delta  = oEvent.deltaY || oEvent.wheelDelta;

        // deltaY for wheel event
        // wheelData for mousewheel event

        if (delta > 0) {
            // Scrolled up
        } else {
            // Scrolled down
        }
    });
});

P.S.

Для comment от Коннелла Уоткинса - "Не могли бы вы объяснить деление на 120?",
есть некоторые подробности на MSDN:

Событие onmousewheel является единственным событием, которое предоставляет свойство wheelDelta. Это свойство указывает расстояние, которое поворачивала колесная кнопка, выраженное в кратных 120. Положительное значение указывает на то, что кнопка колеса повернулась от пользователя. Отрицательное значение указывает, что кнопка колеса повернута к пользователю.

Я оставил часть delta / 120 в моем методе, так как нет никакой полезной ИМО. Прокрутка вверх delta > 0 и вниз delta < 0. Простой.

Ответ 2

Очень простая реализация будет выглядеть так:

$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta/120 > 0) {
            $(this).text('scrolling up !');
        }
        else{
            $(this).text('scrolling down !');
        }
    });
});​

http://www.jsfiddle.net/5t2MN/5/

Ответ 4

Простой пример привязки колеса мыши с jquery....

<!DOCTYPE html>
<html>
<head>
<title>Mouse Wheel</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<style type='text/css'>
body { text-align: center; }
#res
{
    margin-top: 200px;
    font-size: 128px;
    font-weight: bold;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
    var num = 0;
    $(document).bind('mousewheel',function(e){
        if (e.wheelDelta == "120")
        {
            $("#res").text(++num);
        }
        else
        {
            $("#res").text(--num);
        }
    });
});
</script>
</head>
<body>
<div id="res">0</div>
</body>
</html>

Ответ 5

Э. ШейлДелта не работал у меня.

Это сработало:

$(document).ready(function(){
    $('#foo').bind('mousewheel',function(e){
        if (e.originalEvent.wheelDelta == 120){
		//mouse up
        }
        else
        {
		//mouse down
        }
    });
});