JavaScript常見兼容問題解決
JS兼容問題
//事件對象的獲取
document.onclick = function(e){
var _e = window.event || e;
}
document.onkeydown = function(event){
var code = event.keyCode || event.which; //兼容性問題
alert(event.which); // <IE9不支持
}
//事件委托
list.onclick = function(e){
var _e = window.event||e;
var _t = _e.target||_e.srcElement;//事件委托
if(_t.tagName.toLowerCase()=="li"){
alert(_t.innerHTML)
}
}
btn.onclick = function(e){
var _e = window.event || e;
//_e.target 代表的是按鈕的節點對象和btn一樣
var _t = _e.target||_e.srcElement;
console.log(_t.id)
}
//屏幕的高度
document.body.clientHeight （Chrome）|| document.documentElement.clientHeight（IE、
//阻止事件冒泡（前提是獲取事件對象_e）
if(_e.stopPropagation){
_e.stopPropagation();
}else{
_e.cancelBubble = true;
}
什麽時候用阻止事件冒泡？
例如：document上有A事件，div有B事件，div裏面的span有C事件，如果不給span和div加阻止事件冒泡的話，點擊span時就會觸發到div的B事件、document的A事件，當點擊span時不想觸發div和document的事件就要加上阻止事件冒泡，div也是一樣的道理。
//阻止默認行為
if(_e.preventDefault){ //標準處理方式
_e.preventDefault();
}else{ //Ie處理方式
_e.returnValue = false;
}
alert(); 鼠標右擊；submit；a鏈接
/*
事件監聽綁定事件兼容處理
參數
objNode 事件目標
eventName 事件名稱 如：click mouseenter
fn 事件處理程序 函數
*/
function on(objNode,eventName,fn){
if(objNode.addEventListener){ //標準模式
objNode.addEventListener(eventName,fn);
}else{ //IE8及以下模式
objNode.attachEvent("on"+eventName,fn);
}
}
function out(target,eventName,fn){
if(target.removeEventListener){
target.removeEventListener(eventName,fn);
}else{
target.detachEvent("on"+eventName,fn)
}
}
/*
事件監聽綁定事件兼容處理
參數
objNode 事件目標
eventName 事件名稱 如：click mouseenter
fn 事件處理程序 函數
*/
function on(objNode,eventName,fn){
if(objNode.addEventListener){ //標準模式
objNode.addEventListener(eventName,fn);
}else{//IE8及以下模式
objNode.attachEvent("on"+eventName,fn);
}
}
function handler(e){
//console.log(e)
//滾輪方向 事件對象.wheelDelta 120↑ -120↓ 非火狐
//滾輪方向 事件對象.detail -3↑ 3↓ 火狐
if(e.wheelDelta==120||e.detail==-3){
alert("向上");
}else{
alert("向下")
}
}
on(document,"DOMMouseScroll",handler) //Firefox
on(document,"mousewheel",handler) //非Firefox
/*
獲取任意【節點對象】的任意的樣式【屬性】的值
dom 節點對象
pName 樣式屬性名 "aaa"
*/
function getStyleValue(dom, pName) {
if (window.getComputedStyle) { //標準模式
return window.getComputedStyle(dom, null)[pName];
} else { //IE低版本
//dom.currentStyle 樣式對象
return dom.currentStyle[pName];
}
}
//獲取css樣式函數以及透明度兼容
function getStyle(obj, attr){
//獲取對象obj的屬性attr的值
//大小，寬高，位移
if(obj.currentStyle){ //IE瀏覽器的一個屬性，返回的是CSS樣式對象
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr]; //獲取當前元素所有最終使用的CSS屬性值。返回的是一個CSS樣式對象([object CSSStyleDeclaration])
}
}
function getStyleOpacity(obj, attr){
var iCur = 0;
//去掉樣式的單位
if(attr == "opacity"){
iCur = parseFloat(getStyle(obj, attr)) * 100;
}else{
iCur = parseFloat(getStyle(obj, attr))
}
}
//ajax創建請求數據
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest(); //標準
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6
}
JavaScript常見兼容問題解決