常見兼容 IE、 FF艾少、 Google Chrome
官網(wǎng)地址:http://www.bjtces.com
導(dǎo)讀:在學(xué)習(xí)或者使用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的時候出現(xiàn)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三個參數(shù)
}
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膊毁、監(jiān)聽事件兼容性問題
在 IE6 和FF 瀏覽器出現(xiàn) IE6 特殊對待:對象.attachEvent(事件名, 函數(shù)) IE6 解綁:對象.detachEvent(事件名, 函數(shù)) FF以及標準瀏覽器:對象.addEventListener(事件名,函數(shù),是否捕獲 true || false) IE下綁定事件this指向window
HTML5 CSS3 JavaScript