Contenido

Detectar los eventos disponibles en el navegador de tu usuario

3 abr

+ 0

Por norma general, siempre debemos de pensar, a la hora de desarrollar nuestros scripts, en ofrecer al usuario una alternativa, ya sea para realizar una opción o para interactuar con la página. Conocer los eventos que tenemos disponibles en el navegador del usuario que nos está visitando es una idea realmente interesante y en Perfection kills han desarrollado un sistema muy interesante con el que conocer de antemano las capacidades de las que podemos hacer uso.

var isEventSupported = (function(){
    var TAGNAMES = {
      'select':'input','change':'input',
      'submit':'form','reset':'form',
      'error':'img','load':'img','abort':'img'
    }
    function isEventSupported(eventName) {
      var el = document.createElement(TAGNAMES[eventName] || 'div');
      eventName = 'on' + eventName;
      var isSupported = (eventName in el);
      if (!isSupported) {
        el.setAttribute(eventName, 'return;');
        isSupported = typeof el[eventName] == 'function';
      }
      el = null;
      return isSupported;
    }
    return isEventSupported;
  })();

Como podemos ver, la función resultante nos permitirá conocer si un evento está disponible en el navegador. Para ello define una serie de TAGNAMES a los que les asocia un evento. La idea es generar dinámicamente un elemento, relacionado con el evento solicitado (en caso de no estar relacionado usará <div />) y testear si el evento está disponible.

De esta forma únicamente tendremos que llamar a la función solicitando el evento a testear:

isEventSupported('click'); // Evento onclick
isEventSupported('dblclick'); // Evento ondblclick
isEventSupported('mousedown'); // Evento onmousedown

Si únicamente te interesan los eventos de ratón, esta versión más reducida te irá de perlas.

function isMouseEventSupported(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;
}
// Modo de uso
isMouseEventSupported("mouseenter");

Para verlo funcionando y las capacidades de tu navegador, puedes usar esta página de test con esta funcionalidad.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.