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.
0 comentarios, 0 referencias
+
#