使用 IE8 时发现其 原生的 JSON 解析器 存在 Bug,让我们先用 IE8 打开 DEMO 页面体验下。
使用 IE8 时发现其 原生的 JSON 解析器 存在 Bug,让我们先用 IE8 打开 DEMO 页面体验下。
给浏览器绑定事件有时候是非常痛苦的事情,不同的浏览器提供不尽相同的功能的同时,也提供了不同的事件。例如,IE 系列的浏览器支持 mouseenter/mouseleave 事件;Opera 不支持 contextmenu 以及 input 相关的 onbeforepaste、onbeforecut 等事件。
浏览器之间不同程度的事件支持情况,会加重编写跨浏览器的开发成本。而在某种「无奈」的情况下(特别针对 IE),我们都会采用 浏览器嗅探 来决定绑定不同的事件,例如绑定鼠标滚轮事件:
if (Env.ua.ie) {
Event.on(document, 'mousewheel', callback);
} else {
Event.on(document, 'DOMMouseScroll', callback);
}
或者另外中做法就是干脆绑定两个事件。虽然这也能很正常的工作,但我们都了解,无论是基于浏览器嗅探还是重复绑定无用的事件,这都是不完美的解决方案。
Juriy Zaytsev 的代码 给了我们解决这个问题的些启示,他利用 DOM 的特性,来判断针对某元素是否支持具体事件。例如
var el = document.createElement('div');
el.setAttribute('onclick', 'return;');
typeof el.onclick; // "function"
el.setAttribute('onclick2', 'return;');
typeof el.onclick2; // "undefined"
那么,根据这一特性,就可以编写出不依赖浏览器嗅探的事件检测脚本,原文的最终例子
var isEventSupported = (function() {
// 根据特有的事件创建对应的 HTML 元素
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;
})();
那么,判断是否为 Opera 浏览器使用
isEventSupported("contextmenu")
就好过
navigator.userAgent.indexOf('Opera') > -1
而且,以后如果 Opera「修复」了该问题,由于 isEventSupported(\"contextmenu\") 返回的是 true,从而也可保证代码健壮的运行。
最后,原文作者写了个 简单的测试页面 ,用于检测具体浏览器的 DOM Level2 的支持情况。
-- Split --
需要了解其他利用 DOM 特性的小窍门,请 查看这里 。
也写了几年的代码了,越发的感觉到「写代码容易、养代码难」。当代码多了以后,总会有种想法将有用的代码封装起来,方便更多人也避免大家重复造轮子。 于是,就有了这个动画组件 。
下面是复制粘贴时间,先回答下大家可能要问到的些问题。
没有最好的,只有更适合的。或许其他同类型的脚本也能很好的 完成工作(包括很多库中的动画组件能够完成更好的效果)。
本人编写该组件的目的,除了能让您能高效率完成动画效果的 同时,也希望您能了解动画组件的原理。
而且完成这些复杂效果只需要 3KB (压缩后)并且可以定制,何乐而不为 :^)
经过本人的测试,主流的浏览器普遍都被支持。其中包括 Internet Explorer(6/7/8) 、最新版本的 Firefox、Safari、Chrome 以及 Opera,其他支持 Javascript 的浏览器也应该可被支持。
欢迎您提供相应的其他浏览器的兼容情况。
-- Split --
其实编写这个组件并非偶然,在过年的时候 就曾经发布过类似的脚本 ,这次的发布也仅仅是做了些优化。我第一次感觉到发布组件的压力是如此的巨大,甚至我亲自为其每个方法都编写了测试用例以及详细的文档和例子。
好了废话不多说,接下来的一步就是逐渐的优化代码和增强功能,兄弟们如果有好的意见和建议,欢迎不吝提出。
嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHub、 Twitter、 Instagram 等。
这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 要知道作为码农取名是件很难的事情,所以不想在取名这事情上太费心思。
作为八零后,自认为还仅存点点可能不怎么被理解的幽默感,以及对平淡生活的追求和向往。 为了避免不必要的麻烦,声明本站所输出的内容以及观点仅代表个人,不代表自己所服务公司或组织的任何立场。
如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`。