javascript - tag - title of page html
Encuadernación a la rueda de desplazamiento cuando sobre div. (5)
Actualización importante 01/2015 - evento mousewheel en desuso:
Mientras tanto, el evento mousewheel está en desuso y reemplazado por wheel .
MDN Docs para mousewheel decir:
No utilice este evento de rueda.
Esta interfaz no es estándar y está obsoleta. Se usó solo en navegadores que no sean de Gecko. En su lugar, utilice el evento de rueda estándar.
Ahora deberías usar algo como:
// 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
}
});
});
PD
Para el comment de Connell Watkins: "¿Podría explicar la división por 120?" ,
Hay algunos detalles en MSDN :
El evento onmousewheel es el único evento que expone la propiedad wheelDelta. Esta propiedad indica la distancia que ha girado el botón de la rueda, expresada en múltiplos de 120. Un valor positivo indica que el botón de la rueda ha girado lejos del usuario. Un valor negativo indica que el botón de la rueda ha girado hacia el usuario.
Dejé de lado la parte delta / 120 en mi método ya que no hay beneficios de la OMI. Desplazar hacia arriba es delta > 0 y hacia abajo delta < 0 . Sencillo.
Estoy creando un editor de imágenes en el navegador y tengo el código para todos mis controles. Ahora me gustaría mapear teclas de acceso rápido y botones del mouse. El teclado es fácil, pero el ratón no lo es.
Necesito detectar cuándo el mouse está sobre el div lienzo y cuando la rueda del mouse se mueve sobre él. El mouse sobre la parte no es difícil, su vinculación con la rueda del mouse con la que estoy teniendo problemas.
Intenté jQuery.scroll pero eso solo funciona si el div bajo la rueda está configurado para desplazarse solo. Mi canvas no es. Su desplazamiento se controla a través de mis scripts.
Cosas a tener en cuenta:
- Estoy usando jQuery como mi base.
- En realidad no estoy desplazando nada, estoy tratando de enlazar y pasar a la rueda de desplazamiento sin desplazarme realmente.
Estructura
<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>
¿Has probado el plugin mousewheel?
El e.wheelDelta no funcionó para mí.
Esto funcionó:
$(document).ready(function(){
$(''#foo'').bind(''mousewheel'',function(e){
if (e.originalEvent.wheelDelta == 120){
//mouse up
}
else
{
//mouse down
}
});
});
Un ejemplo simple para unir la rueda del ratón con 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>
Una implementación muy fácil se vería así:
$(document).ready(function(){
$(''#foo'').bind(''mousewheel'', function(e){
if(e.originalEvent.wheelDelta/120 > 0) {
$(this).text(''scrolling up !'');
}
else{
$(this).text(''scrolling down !'');
}
});
});​