越过div时绑定到滚轮 [英] Binding to the scroll wheel when over a div

问题描述

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

I'm creating an image editor in the browser and I've got the code for all of my controls done. Now I'd like to map hot keys and mouse buttons. The keyboard is easy, but the mouse is not.

我需要检测鼠标何时在画布div上以及鼠标滚轮在其上方移动时。鼠标在部分上并不难，它与我遇到麻烦的鼠标滚轮绑定。

I need to detect when the mouse is over the canvas div and when the mouse wheel is moved above it. The mouse over part is not hard, its binding to the mouse wheel that I'm having trouble with.

我试过 jQuery.scroll 但是如果 div 设置为自动滚动。我的画布不是。它的偏移量是通过我的脚本控制的。

I tried jQuery.scroll but that only seams to work if the div under the wheel is set to scroll itself. My canvas is not. It's offset is controlled via my scripts.

注意事项：

• I我正在使用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>

推荐答案

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

与此同时 mousewheel 事件已被弃用，并替换为 wheel 。

mousewheel ：//developer.mozilla.org/en-US/docs/Web/Events/mousewheel#wikiArticlerel =nofollow noreferrer> MDN文档：

MDN Docs for mousewheel say:

不要使用此轮事件。

Do not use this wheel event.

此接口是非标准的并且已弃用。它仅用于非Gecko浏览器。而是使用标准的轮子事件。

This interface is non-standard and deprecated. It was used in non-Gecko browsers only. Instead use the standard wheel event.

现在你应该使用类似的东西：

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

---

PS

对于评论来自康奈尔沃特金斯 - 你能用120解释除法吗？，

有一些关于 MSDN ：

onmousewheel事件是暴露wheelDelta属性的唯一事件。此属性指示车轮按钮旋转的距离，以120的倍数表示。正值表示车轮按钮已旋转远离用户。负值表示滚轮按钮已朝向用户旋转。

The onmousewheel event is the only event that exposes the wheelDelta property. This property indicates the distance that the wheel button has rotated, expressed in multiples of 120. A positive value indicates that the wheel button has rotated away from the user. A negative value indicates that the wheel button has rotated toward the user.

我遗漏了 delta / 120 参与我的方法，因为IMO没有任何好处。向上滚动 delta> 0 和向下 delta< 0 。简单。

I left out the delta / 120 part in my method as there's no benefit IMO. Scrolling up is delta > 0 and down delta < 0. Simple.

这篇关于越过div时绑定到滚轮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！