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

Question

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

我需要检测鼠标何时位于 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>

Answer 1

一个非常简单的实现如下所示:

$(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/