正在检测对给定JavaScript事件的支持?

p5cysglq  于 2023-03-11  发布在  Java
关注(0)|答案(4)|浏览(90)

我对使用JavaScript hashchange事件来监视URL片段标识符的变化很感兴趣,我知道Really Simple History和jQuery插件可以实现这一点,但是,我得出的结论是,在我的特定项目中,不值得使用另一个JS文件来增加开销。
我想做的是采取“渐进增强”的路线。也就是说,我想测试访问者的浏览器是否支持hashchange事件,如果它可用,我就编写代码使用它,作为一个增强功能,而不是核心功能。IE 8、Firefox 3.6和Chrome 4.1.249支持它,这占了我网站流量的20%左右。
那么,呃......有没有什么方法可以测试浏览器是否支持某个特定的事件?

wrrgggsh

wrrgggsh1#

好吧,最好的方法是不通过浏览器嗅探,Juriy Zaytsev(@kangax)做了一个非常有用的方法来检测事件支持:

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;
})();

用法:

if (isEventSupported('hashchange')) {
  //...
}

这种技术现在被用在一些库中,比如jQuery。
在此阅读更多信息:

vojdkbi0

vojdkbi02#

Mozilla文档建议如下:

if ("onhashchange" in window) {
    alert("The browser supports the hashchange event!");
}

这在IE8和Chrome 5测试版中也有效(我没有测试Chrome 4.1),在Opera和Safari中也会失败。
编辑:我链接的Mozilla页面不再包含任何建议。我也找不到任何其他包含事件检测建议的Mozilla文档。

vlurs2pr

vlurs2pr3#

下面是answer provided by CMS的一个修改,它不包含另一个函数,我认为它可以工作:

function event_exists(eventName){
    if(typeof(eventName)!='string' || eventName.length==0)return false;
    var TAGNAMES = {
        'select':'input','change':'input',
        'submit':'form','reset':'form',
        'error':'img','load':'img','abort':'img'
    }
    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;
}
06odsfpq

06odsfpq4#

我认为最简单的解决方案是对事件类执行typeof检查。
例如:typeof(InputEvent)在Chrome中返回"function",在Internet Explorer中返回"undefined"

相关问题