国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

詳解js幾個繞不開的事件兼容寫法

2019-11-19 15:36:16
字體:
來源:轉載
供稿:網友

本文介紹了詳解js幾個繞不開的事件兼容寫法,分享給大家,具體如下:

1、鍵盤事件 keyCode 兼容性寫法

var inp = document.getElementById('inp')var result = document.getElementById('result')function getKeyCode(e) { e = e ? e : (window.event ? window.event : "") return e.keyCode ? e.keyCode : e.which}inp.onkeypress = function(e) { result.innerHTML = getKeyCode(e)}

2、求窗口大小的兼容寫法

當我們獲取滾動條滾動距離時:

IE,Chrome: document.body.scrollTop

FF: document.documentElement.scrollTop

// 瀏覽器窗口可視區域大?。ú话üぞ邫诤蜐L動條等邊線)// 1600 * 525var client_w = document.documentElement.clientWidth || document.body.clientWidth;var client_h = document.documentElement.clientHeight || document.body.clientHeight;// 網頁內容實際寬高(包括工具欄和滾動條等邊線)// 1600 * 8var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;// 網頁內容實際寬高 (不包括工具欄和滾動條等邊線)// 1600 * 8var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;// 滾動的高度var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

3、DOM 事件處理程序的兼容寫法(能力檢測)

var eventshiv = {  // event兼容  getEvent: function(event) {    return event ? event : window.event;  },  // type兼容  getType: function(event) {    return event.type;  },  // target兼容  getTarget: function(event) {    return event.target ? event.target : event.srcelem;  },  // 添加事件句柄  addHandler: function(elem, type, listener) {    if (elem.addEventListener) {      elem.addEventListener(type, listener, false);    } else if (elem.attachEvent) {      elem.attachEvent('on' + type, listener);    } else {      // 在這里由于.與'on'字符串不能鏈接,只能用 []      elem['on' + type] = listener;    }  },  // 移除事件句柄  removeHandler: function(elem, type, listener) {    if (elem.removeEventListener) {      elem.removeEventListener(type, listener, false);    } else if (elem.detachEvent) {      elem.detachEvent('on' + type, listener);    } else {      elem['on' + type] = null;    }  },  // 添加事件代理  addAgent: function (elem, type, agent, listener) {    elem.addEventListener(type, function (e) {      if (e.target.matches(agent)) {        listener.call(e.target, e); // this 指向 e.target      }    });  },  // 取消默認行為  preventDefault: function(event) {    if (event.preventDefault) {      event.preventDefault();    } else {      event.returnValue = false;    }  },  // 阻止事件冒泡  stopPropagation: function(event) {    if (event.stopPropagation) {      event.stopPropagation();    } else {      event.cancelBubble = true;    }  }};

4、解決 IE9 以下瀏覽器不能使用 opacity

opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

5、為一個元素綁定兩個相同事件:attachEvent/attachEventLister 出現的兼容問題

事件綁定:(不兼容需要兩個結合做兼容if..else..)

IE8以下用: attachEvent('事件名',fn);

FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false);

 function myAddEvent(obj,ev,fn){   if(obj.attachEvent){    //IE8以下    obj.attachEvent('on'+ev,fn);   }else{    //FF,Chrome,IE9-10    obj.attachEventLister(ev,fn,false);   }  }

6、獲取元素的非行間樣式值

function getStyle(object,oCss) {    if (object.currentStyle) {     return object.currentStyle[oCss];//IE    }else{     return getComputedStyle(object,null)[oCss];//除了IE    }  }

7、節點加載

//火狐下特有的節點加載事件,就是節點加載完才執行,和onload不同//感覺用到的不多,直接把js代碼放在頁面結構后面一樣能實現。。document.addEventListener('DOMContentLoaded',function ( ){},false);//DOM加載完成。好像除IE6-8都可以.

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 石家庄市| 铁岭县| 南和县| 舞阳县| 宜君县| 上栗县| 吉林省| 都江堰市| 固镇县| 永靖县| 漯河市| 巴东县| 色达县| 东光县| 上栗县| 会泽县| 饶平县| 武城县| 嘉荫县| 松桃| 思南县| 株洲市| 泰来县| 凯里市| 盐池县| 明水县| 和田市| 楚雄市| 华蓥市| 长武县| 湟源县| 崇礼县| 奉化市| 邵武市| 江门市| 凤阳县| 都兰县| 泰来县| 嘉荫县| 靖宇县| 简阳市|