¿Por que no funciona ‘event.wheelDelta’ en Firefox?

en este articulo vamos a mostrar como configurar correctamente en nuestra web el evento de la rueda del ratón.

Cuando configuramos el evento en JavaScript de la rueda del ratón debemos definir en nuestro código algo similar a:

document.getElementById('IDElemento').addEventListener('mousewheel'    , function(e) { e.preventDefault(); FuncionEjecutar(e); }); // IE9, Chrome, Safari, Opera
document.getElementById('IDElemento').addEventListener('DOMMouseScroll', function(e) { e.preventDefault(); FuncionEjecutar(e); }); // Firefox

La primera linea es para los navegadores IE9, Chrome, Safari, Opera y la segunda para FireFox, donde ‘FuncionEjecutar();’ es la función que se ejecutara posteriormente a saltar el evento del elemento ‘IDElemento’.

El problema es que a la hora de ver el salto de nuestra rueda para poder hacer un Zoom,etc… la propiedad wheelDelta no es una propiedad estándar, por lo que no esta en todos los navegadores, y en particular en FireFox.

Acceder a ella en Firefox debemos acudir a la propiedad ‘detail’ del evento.

event.detail es un parámetro 40 menor al event.mousewheel y ademas de signo contrario.

Por lo que para mostrar correctamente el incremento en todos los navegadores nuestra función tiene que se parecida a :

function FuncionEjecutar(event){
  if ( event.wheelDelta ){
    alert('Para IE9, Chrome, Safari, Opera -> ' + event.wheelDelta);
  }else if( event.detail ) {
    alert('Para IE9, Chrome, Safari, Opera -> ' + (event.detail * (-40)));
  }
}