Adicionando evento Mouse Wheel em javascript

Mouse Wheel (esse botão de scroll no meio do mouse) pode ser manipulado via javascript. Script interessantes de zoom podem ser feitos com mouse wheel, como este e este , ambos do dhteumeuleu.

mouse-wheel

Cada browser interpreta o evento de uma maneira, mas existe uma função que acredito ter sido feita pelo site adomas.org que é cross-browser igualando todas as diferenças entre os browsers:

function handle(delta) {
if (delta < 0){ /* EVENTO COM O MOUSE WHEEL DESCENDO */ alert('descendo'); } else { /* EVENTO COM O MOUSE WHEEL DESCENDO */ alert('subindo'); } } function wheel(event){var delta=0;if(!event)event=window.event;if(event.wheelDelta){delta=event.wheelDelta/120;if(window.opera)delta=-delta;}else if(event.detail){delta=-event.detail/3;}if(delta)handle(delta);if(event.preventDefault)event.preventDefault();event.returnValue=false;}if(window.addEventListener)window.addEventListener('DOMMouseScroll',wheel,false);window.onmousewheel=document.onmousewheel=wheel; [/sourcecode] Basta colocar seu código na linha 4 e 7 substituindo o alert. Vejam um exemplo bem simples que fiz mostrando o evento, quando eu tiver tempo livre eu faço algo mais interessante.

6 thoughts on “Adicionando evento Mouse Wheel em javascript

  1. O Google Maps foi a primeira aplicação web que eu me lembre que usou o scroll do mouse; é muito bom, aumenta em muito a experiência do usuário!
    Bacana!

  2. Pingback: Zoom de Imagem em Javascript e jQuery - Passos 5 e 6 | TidBits

  3. Pingback: Jogo Pong em Javascript - Passo a passo | TidBits

Leave a Reply

Your email address will not be published. Required fields are marked *