代码之家 › 专栏 › 技术社区 › Robert Hurst Patrick Ryan

在div上绑定到滚轮

javascript-events jquery javascript

Robert Hurst Patrick Ryan · 技术社区 · 15 年前

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

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

5 回复 | 直到 13 年前

Community Mohan Dere 9 年前

重要更新01/2015-鼠标滚轮事件已弃用:

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

附笔。

对于 comment 康奈尔·沃特金斯-“你能解释一下120的划分吗?”
有一些关于 MSDN

onmousewheel事件是唯一公开wheelDelta属性的事件。此属性表示控制盘按钮旋转的距离,以120的倍数表示。正值表示控制盘按钮已远离用户旋转。负值表示控制盘按钮已朝用户方向旋转。

我漏掉了 delta / 120 这是我的方法的一部分,因为在我看来没有好处 delta > 0 delta < 0 . 很简单。

ESP32 9 年前

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

mamoo 15 年前

你试过鼠标滚轮插件吗?

http://www.ogonek.net/mousewheel/jquery-demo.html

Temüjin 13 年前

一个用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>

abelabbesnabi 9 年前

电动轮三角洲不适合我。

这起作用了:

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