快捷導航

常用原生JS兼容性寫法匯總

更新時間：2016年04月27日 08:37:48 作者：小蚊

這篇文章主要為大家詳細匯總了常用原生JS兼容性寫法，感興趣的小伙伴們可以參考一下

就來總結(jié)一下簡單的東西

備注：一下的方法都是包裹在一個EventUtil對象里面的，直接采用對象字面量定義方法了。。。

①添加事件方法

addHandler：function(element,type,handler){
 if(element.addEventListener){//檢測是否為DOM2級方法
  element.addEventListener(type, handler, false);
 }else if (element.attachEvent){//檢測是否為IE級方法
  element.attachEvent("on" + type, handler);
 } else {//檢測是否為DOM0級方法
  element["on" + type] = handler;
 }
}

②移除之前添加的事件方法

removeHandler：function(element, type, handler){
  if (element.removeEventListener){
   element.removeEventListener(type, handler, false);
  } else if (element.detachEvent){
   element.detachEvent("on" + type, handler);
  } else {
   element["on" + type] = null;
  }
 }

③獲取事件及事件對象目標

//獲取事件對象的兼容性寫法
 getEvent: function(event){
  return event ? event : window.event;
 },
 //獲取事件對象目標的兼容性寫法
 getTarget: function(event){
  return event.target || event.srcElement;
 }

④阻止瀏覽器默認事件的兼容性寫法

preventDefault: function(event){
  if (event.preventDefault){
   event.preventDefault();
  } else {
   event.returnValue = false;
  }
 }

⑤阻止事件冒泡的兼容性寫法

stopPropagation: function(event){
  if (event.stopPropagation){
   event.stopPropagation();
  } else {
   event.cancelBubble = true;
  }
 }

⑥mouseover和mouseout 事件才包含的獲取相關(guān)元素的方法

//mouseover和mouseout 事件才包含的獲取相關(guān)元素的方法
getRelatedTarget: function(event){
 if (event.relatedTarget){
  return event.relatedTarget;
 } else if (event.toElement){
  return event.toElement;
 } else if (event.fromElement){
  return event.fromElement;
 } else {
  return null;
 }
}

⑦鼠標滾輪判斷

對于mousedown 和mouseup 事件來說，則在其event 對象存在一個button 屬性，
表示按下或釋放的按鈕。DOM的button 屬性可能有如下3 個值：0 表示主鼠標按鈕，1 表示中間的鼠
標按鈕（鼠標滾輪按鈕），2 表示次鼠標按鈕。在常規(guī)的設(shè)置中，主鼠標按鈕就是鼠標左鍵，而次鼠標
按鈕就是鼠標右鍵。
IE8 及之前版本也提供了button 屬性，但這個屬性的值與DOM 的button 屬性有很大差異。
 0：表示沒有按下按鈕。
 1：表示按下了主鼠標按鈕。
 2：表示按下了次鼠標按鈕。
 3：表示同時按下了主、次鼠標按鈕。
 4：表示按下了中間的鼠標按鈕。
 5：表示同時按下了主鼠標按鈕和中間的鼠標按鈕。
 6：表示同時按下了次鼠標按鈕和中間的鼠標按鈕。
 7：表示同時按下了三個鼠標按鈕。

getButton: function(event){
 if (document.implementation.hasFeature("MouseEvents", "2.0")){
  return event.button;
 } else {
  switch(event.button){
   case 0:
   case 1:
   case 3:
   case 5:
   case 7:
   return 0;
   case 2:
   case 6:
   return 2;
   case 4:
   return 1;
  }
 }
}

⑧能夠取得鼠標滾輪增量值（delta）的方法

getWheelDelta: function(event){
 if (event.wheelDelta){
  return (client.engine.opera && client.engine.opera < 9.5 ?
   -event.wheelDelta : event.wheelDelta);
 } else {
  return -event.detail * 40;//firefox中的值為+3表示向上滾，-3表示向下滾
 }
}

⑨跨瀏覽器的方式取得字符編碼

getCharCode: function(event){
 if (typeof event.charCode == "number"){
  return event.charCode;
 } else {
  return event.keyCode;
 }
}

⑩訪問剪貼板中的數(shù)據(jù)

getClipboardText: function(event){
  var clipboardData = (event.clipboardData || window.clipboardData);
  return clipboardData.getData("text");
 }

11.設(shè)置剪貼板中的數(shù)據(jù)

setClipboardText: function(event, value){
  if (event.clipboardData){
   return event.clipboardData.setData("text/plain", value);
  } else if (window.clipboardData){
   return window.clipboardData.setData("text", value);
  }
 }

封裝一下，然后就可以直接用了。

完整文件及更多CSS、LESS基礎(chǔ)重置樣式見：https://github.com/LuckyWinty/resetFile

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。

您可能感興趣的文章: