JavaScript常見相容問題解決

標籤：top   ons   obj   ati   tde   事件   Firefox   ros   can   

 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、FF）

//阻止事件冒泡（前提是擷取事件對象_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↓ 非Firefox

　　//滾輪方向  事件對象.detail   -3↑  3↓ Firefox

　　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常見相容問題解決