时创优服 | JavaScript 事件兼容性问题整理（二）

常见兼容 IE、 FF、 Google Chrome

官网地址：http://www.bjtces.com

导读：在学习或者使用javascript的过程中，最为痛苦的就是浏览器兼容问题

1、Event对象

window.event (IE) ev(标准浏览器)

解决办法例子：

document.onclick = function(ev){

var ev = ev|| window.event;

alert(ev);

}

2、JavaScript原生获取滚动距离

document.documentElement.scrollTop(标准浏览器)

document.body.scrollTop (Google Chrome)

解决办法

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

3、FF浏览器下有空DIV的时候出现bug

解决办法：在拖拽的方法里面加上以下代码

return false;//阻止默认事件

4、 滚轮事件：

onmousewheel (IE、Google) DOMMouseScroll(FF) wheelDelta 滚轮属性(IE、Google) detail滚轮属性(FF)

阻止默认事件：绑定写法：preventDefault

window.onload = function() {

var item = document.getElementById('example');

if (item.addEventListener) {

item.addEventListener('DOMMouseScroll', fn, false); //FF三个参数

}

item.onmousewheel = fn;

function fn(ev) {

var ev = ev || event;//event 事件兼容处理

var flag = false;

if (ev.wheelDelta) {

flag = ev.wheelDelta < 0 ? false : true;

}else{

flag = ev.detail > 0 ? false : true;

}

if (flag) {

item.style.height = item.offsetHeight - 10 + 'px';

}else {

item.style.height = item.offsetHeight + 10 + 'px';

}

//阻止绑定事件

if (ev.preventDefault) {

ev.preventDefault();

}else{

//阻止普通事件

return false;

}

}

}

5、监听事件兼容性问题

在 IE6 和FF 浏览器出现 IE6 特殊对待：对象.attachEvent(事件名, 函数) IE6 解绑：对象.detachEvent(事件名, 函数) FF以及标准浏览器：对象.addEventListener(事件名,函数,是否捕获 true || false) IE下绑定事件this指向window

HTML5 CSS3 JavaScript