javascript - 在div上绑定(bind)到滚轮

我正在浏览器中创建图像编辑器，并且所有控件的代码都已完成。现在，我想映射热键和鼠标按钮。键盘很容易，但鼠标却不容易。

我需要检测鼠标何时在 Canvas div上方以及鼠标滚轮何时在其上方移动。鼠标悬停的部分并不难，它绑定(bind)到了我遇到麻烦的鼠标滚轮上。

我尝试了jQuery.scroll，但是只有将滚轮下方的div设置为可滚动时，接缝才能起作用。我的canvas不是。它的偏移量是通过我的脚本控制的。

注意事项:

我使用jQuery作为基础。

我没有敏锐地滚动任何东西，我试图绑定(bind)和事件到滚轮而不实际滚动。

结构

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

最佳答案

重要更新01/2015-不推荐使用mousewheel事件:

同时，不赞成使用 mousewheel 事件，并用 wheel 代替。

MDN Docs用于鼠标滚轮说:



现在，您应该使用类似:

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

附言

对于康奈尔·沃特金斯(Connell Watkins)的comment-“您能解释一下120分吗？”，
有关MSDN的一些详细信息:



由于IMO没有任何好处，因此我在方法中省略了delta / 120部分。向上滚动为delta > 0，向下滚动为delta < 0。简单的。

关于javascript - 在div上绑定(bind)到滚轮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3715496/