Javascript 在 div 上绑定到滚轮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3715496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Binding to the scroll wheel when over a div
提问by Robert Hurst
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.
我正在浏览器中创建一个图像编辑器，并且我已经完成了所有控件的代码。现在我想映射热键和鼠标按钮。键盘很容易，但鼠标不是。
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.
我需要检测鼠标何时位于画布 div 上方以及何时将鼠标滚轮移到其上方。鼠标悬停部分并不难，它绑定到我遇到问题的鼠标滚轮。
I tried jQuery.scrollbut that only seams to work if the divunder the wheel is set to scroll itself. My canvasis not. It's offset is controlled via my scripts.
我试过了，jQuery.scroll但只有div在轮子下设置为滚动时才能工作。我canvas的不是。它的偏移量是通过我的脚本控制的。
Things to note:
注意事项：
- I'm using jQuery as my base.
- I'm not acually scrolling anything, I'm trying to bind and event to the scroll wheel without actually scrolling.
- 我使用 jQuery 作为我的基础。
- 我没有真正滚动任何东西，我试图在没有实际滚动的情况下将事件绑定到滚轮。
Structure
结构
<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>
采纳答案by Markus Hofmann
Important Update 01/2015 - mousewheel event deprecated:
重要更新 01/2015 - 鼠标滚轮事件已弃用：
In the meantime the mousewheelevent is deprecated and replaced by wheel.
与此同时，该mousewheel事件已被弃用并由wheel.
MDN Docsfor mousewheelsay:
MDN文档的滚轮说：
Do not use this wheel event.
This interface is non-standard and deprecated. It was used in non-Gecko browsers only. Instead use the standard wheel event.
不要使用此轮事件。
此接口是非标准的且已弃用。它仅用于非 Gecko 浏览器。而是使用标准的wheel 事件。
Now you should use something like:
现在你应该使用类似的东西：
// 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.
聚苯乙烯
For the commentfrom Connell Watkins - "Could you explain the division by 120?",
there are some details on MSDN:
对于评论来自康奈尔沃特金斯- “你能由120解释划分的？” ，MSDN
上有一些细节：
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.
onmousewheel 事件是唯一公开 wheelDelta 属性的事件。此属性表示滚轮按钮旋转的距离，以 120 的倍数表示。正值表示滚轮按钮已远离用户旋转。负值表示滚轮按钮已朝向用户旋转。
I left out the delta / 120part in my method as there's no benefit IMO. Scrolling up is delta > 0and down delta < 0. Simple.
我省略了delta / 120我的方法中的部分，因为 IMO 没有任何好处。向上滚动delta > 0和向下滚动delta < 0。简单的。
回答by jAndy
A very easy implementation would look like:
一个非常简单的实现如下所示：
$(document).ready(function(){
$('#foo').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta/120 > 0) {
$(this).text('scrolling up !');
}
else{
$(this).text('scrolling down !');
}
});
});?
回答by mamoo
回答by Chandra Nakka
A simple example for bind mouse wheel with jquery....
使用 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>
回答by abelabbesnabi
The e.wheelDelta didn't work for me.
e.wheelDelta 对我不起作用。
This worked:
这有效：
$(document).ready(function(){
$('#foo').bind('mousewheel',function(e){
if (e.originalEvent.wheelDelta == 120){
//mouse up
}
else
{
//mouse down
}
});
});