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.
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.
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.
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.
Structure
<div id="pageWrap">
[page head stuff...]
<div id="canvas">
[the guts of the canvas go here; lots of 开发者_StackOverflow社区various stuff...]
<div>
[page body and footer stuff...]
</div>
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 !');
}
});
});
http://www.jsfiddle.net/5t2MN/5/
Important Update 01/2015 - mousewheel event deprecated:
In the meantime the mousewheel event is deprecated and replaced by wheel.
MDN Docs for mousewheel say:
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.
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 comment from Connell Watkins - "Could you explain the division by 120?",
there are some details on 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.
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.
Have you tried mousewheel plugin?
http://www.ogonek.net/mousewheel/jquery-demo.html
A simple example for bind mouse wheel with 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>
The e.wheelDelta didn't work for me.
This worked:
$(document).ready(function(){
$('#foo').bind('mousewheel',function(e){
if (e.originalEvent.wheelDelta == 120){
//mouse up
}
else
{
//mouse down
}
});
});
加载中,请稍侯......
精彩评论