首頁 > web前端 > js教程 > 常用原生JS相容性寫法彙總_javascript技巧

常用原生JS相容性寫法彙總_javascript技巧

WBOY
發布: 2016-05-16 15:03:33
原創
1903 人瀏覽過

就來總結簡單的東西

備註:一下的方法都是包裹在一個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 事件才包含的取得相關元素的方法

//mouseover和mouseout 事件才包含的获取相关元素的方法
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 表示次滑鼠按鈕。在常規的設定中,主滑鼠按鈕就是滑鼠左鍵,而次滑鼠
按鈕就是滑鼠右鍵。
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 &#63;
   -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;
 }
}
登入後複製

⑩存取剪貼簿中的資料

getClipboardText: function(event){
  var clipboardData = (event.clipboardData || window.clipboardData);
  return clipboardData.getData("text");
 }
登入後複製

11.設定剪貼簿中的資料

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基礎重置樣式請見:https://github.com/LuckyWinty/resetFile

以上就是本文的全部內容,希望對大家的學習有所幫助。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板