您的位置:68399皇家赌场 > 服务器租用 > 时创新优品服 | JavaScript 事件包容性难点整理(

时创新优品服 | JavaScript 事件包容性难点整理(

发布时间:2019-05-04 04:16编辑:服务器租用浏览(67)

    滚动条距离(有个别浏览器上边做合作)
    document.documentElement.scrollTop || document.body.scrollTop

    大规模包容 IE、 FF、 谷歌(Google) Chrome

     

    /*
     跨浏览器增多事件绑定
     obj : 须要绑定js时间的对象
     type:  欲绑定的轩然大波类型,如:click ,mounseover 等事件  无需增添on
     fn  :  触发的台本
    */
    function addEvent(obj,type,fn){
      if(typeof obj.addEventListener !='undefined'){ //W3C
         obj.add伊芙ntListener(type,fn,false) ; //false代表不抓获冒泡
      }else{  //IE   IE提供的拉长事件绑定期存款在难点
         //为了便于删除事件 特将对象绑定的事件都绑定在该目的自身上,删除的时候一样传递3个该对象就能够
          if(!obj.events[type]){
          obj.events[type] = [] ; //创建八个存放事件管理函数的数组
        //把第二回的事件管理函数先储存到第八个岗位上
      if(obj["on" type]){
          obj.events[type][0] = fn;
      }
       }else{
          //同三个登记函数举行遮掩,不增多到计数器中
       if (addEvent.equal(obj.events[type], fn)) return false;
       }
       //从第一遍先导我们用事件计数器来存款和储蓄
      obj.events[type][addEvent.ID ] = fn;
      //实行事件管理函数
      obj['on' type] = addEvent.exec;
      
      }
    }

    事件监听达成包容:
    if(elem.addEventListener){
    elem.addEventListener("click",fn)
    }else{
    elem.attachEvent("onclick",fn);
    }

    官网地址:

     

    //为各样事件分配二个计数器
    addEvent.ID = 1;

    事件目标
    var ev=ev||window.event;

    导读:在上学或许采纳javascript的进度中,最为难熬的就是浏览器包容难题

     

    //同3个挂号函数进行屏蔽
    addEvent.equal = function (es, fn) {
     for (var i in es) {
      if (es[i] == fn) return true;
     }
     return false;
    }

    重临事件触发时鼠标所在的目的
    var ele = event.srcElement || event.target;

    1、Event对象

    /*

     

    收回冒泡
    if(event.stopPropagation){
    event.stopPropagation(); //标准浏览器
    }else{
    event.cancaleBubble==true; //老ie
    }

    window.event (IE) ev(规范浏览器)

     跨浏览器增多事件绑定 

    //施行事件管理函数
    addEvent.exec = function (event) {
     var e = event || addEvent.fixEvent(window.event);
     var es = this.events[e.type];
     for (var i in es) {
      es[i].call(this, e);
     }
    };

    截留浏览器私下认可行为
    function preventDefa(e){
    if(window.event){
    //IE中截留函数器暗许动作的法门
    window.event.returnValue = false;
    }
    else{
    //阻止暗中认可浏览器动作(W3C)
    e.preventDefault();
    }
    }
    截留浏览器暗中同意行为(高版本)
    return false; 全部触发事件和动作都不会被执行. 可以用来取代preventDefault

    消除办法例子:

     obj : 需求绑定js时间的对象

     
    //把IE常用的伊夫nt对象配对到W3C中去
    addEvent.fixEvent = function (event) {
     event.preventDefault = addEvent.fixEvent.preventDefault;
     event.stopPropagation = addEvent.fixEvent.stopPropagation;
     event.target = event.srcElement;
     return event;
    };

    document.onclick = function(ev){

     type:  欲绑定的轩然大波类型,如:click ,mounseover 等事件  不要求加多on

    //IE阻止暗许行为
    addEvent.fixEvent.preventDefault = function () {
     this.returnValue = false;
    };

    var ev = ev|| window.event;

     fn  :  触发的剧本

    //IE阻止私下认可行为
    addEvent.fixEvent.preventDefault = function () {
     this.returnValue = false;
    };

    alert(ev);

    */

    //跨浏览器删除事件
    function removeEvent(obj, type, fn) {
     if (typeof obj.removeEventListener != 'undefined') { //W3C
      obj.removeEventListener(type, fn, false);
     } else {
      for (var i in obj.events[type]) {
       if (obj.events[type][i] == fn) {
        delete obj.events[type][i];
       }
      }
     }
    }

    }

    function addEvent(obj,type,fn){

     

    二、JavaScript原生获取滚动距离

      if(typeof obj.addEventListener !='undefined'){ //W3C

    //跨浏览器获取窗口可视大小
     
    function getInner(){
       if(typeof window.innerWidth !='undefined'){
         return {
         width:window.innerWidth ,
      height:window.innerHeight
      }
       }else{
         return {
          width:document.documentElement.clientWidth ,
       height:document.documentElement.clientHeight
      }
       }
    }

    document.documentElement.scrollTop(规范浏览器)

         obj.add伊夫ntListener(type,fn,false) ; //false表示不抓获冒泡

    //跨浏览器获取滚动条到左边的垂直宽度
    function getScollLeft(){
            var scrollPos; 
            if (window.pageXOffset) { 
            scrollPos = window.pageXOffset; } 
            else if (document.compatMode && document.compatMode != 'BackCompat') 
            { scrollPos = document.documentElement.scrollLeft; } 
            else if (document.body) { scrollPos = document.body.scrollLeft; }  
            return scrollPos; 
    }

    document.body.scrollTop (Google Chrome)

      }else{  //IE   IE提供的增进事件绑定期存款在难题 

    //跨浏览器获取滚动条到顶部的垂直中度
    function getScrollTop() { 
            var scrollPos; 
            if (window.pageYOffset) { 
            scrollPos = window.pageYOffset; } 
            else if (document.compatMode && document.compatMode != 'BackCompat') 
            { scrollPos = document.documentElement.scrollTop; } 
            else if (document.body) { scrollPos = document.body.scrollTop; }  
            return scrollPos;  
    }

    化解办法

         //为了便于删除事件 特将目的绑定的事件都绑定在该对象自个儿上,删除的时候同样传递贰个该目的就可以 

    //跨浏览器获取Style
    function getStyle(element, attr) {
     if (typeof window.getComputedStyle != 'undefined') {//W3C
      return window.getComputedStyle(element, null)[attr];
     } else if (typeof element.currentStyle != 'undeinfed') {//IE
      return element.currentStyle[attr];
     }
    }

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

          if(!obj.events[type]){

    //判定class是或不是留存
    function hasClass(element, className) {
     return element.className.match(new RegExp('(\s|^)'') className '(\s|$)'')));
    }

    叁、FF浏览器下有空DIV的时候现身bug

          obj.events[type] = [] ; //创设多个存放事件管理函数的数组

    //跨浏览器加多link规则
    function insertRule(sheet, selectorText, cssText, position) {
     if (typeof sheet.insertRule != 'undefined') {//W3C
      sheet.insertRule(selectorText '{' cssText '}', position);
     } else if (typeof sheet.addRule != 'undefined') {//IE
      sheet.addRule(selectorText, cssText, position);
     }
    }

    消除办法:在拖拽的法子里面加多以下代码

        //把第三回的事件管理函数先积存到第3个职责上

    //跨浏览器移出link规则
    function deleteRule(sheet, index) {
     if (typeof sheet.deleteRule != 'undefined') {//W3C
      sheet.deleteRule(index);
     } else if (typeof sheet.removeRule != 'undefined') {//IE
      sheet.removeRule(index);
     }
    }

    return false;//阻止暗中认可事件

      if(obj["on" type]){

    //获取Event对象
    function getEvent(event){
      return event || window.event;
    }

    四、 滚轮事件:

          obj.events[type][0] = fn; 

     

    onmousewheel (IE、谷歌(Google)) DOMMouseScroll(FF) wheelDelta 滚轮属性(IE、谷歌) detail滚轮属性(FF)

      }

    //阻止私下认可行为
    function preDef(event) {
     var e = getEvent(event);
     if (typeof e.preventDefault != 'undefined') {//W3C
      e.preventDefault();
     } else {//IE
      e.returnValue = false;
     }
    }

    掣肘暗许事件:绑定写法:preventDefault

       }else{

    //删除左后空格
    function trim(str) {
     return str.replace(/(^s*)|(s*$)/g, '');
    }

    window.onload = function() {

          //同二个注册函数举行遮掩,不增加到计数器中

     

    var item = document.getElementById('example');

       if (addEvent.equal(obj.events[type], fn)) return false;

     

    if (item.addEventListener) {

       }

       

    item.add伊夫ntListener('DOMMouseScroll', fn, false); //FF几个参数

       //从第叁遍始发我们用事件计数器来积累

    }

      obj.events[type][addEvent.ID ] = fn;

    item.onmousewheel = fn;

      //推行事件管理函数

    function fn(ev) {

      obj['on' type] = addEvent.exec;

    var ev = ev || event;//event 事件极度管理

      

    var flag = false;

      }

    if (ev.wheelDelta) {

    }

    flag = ev.wheelDelta < 0 ? false : true;

     

    }else{

    //为各类事件分配三个计数器

    flag = ev.detail > 0 ? false : true;

    addEvent.ID = 1;

    }

     

    if (flag) {

    //同3个登记函数实行屏蔽

    item.style.height = item.offsetHeight - 10 'px';

    addEvent.equal = function (es, fn) {

    }else {

     for (var i in es) {

    item.style.height = item.offsetHeight 10 'px';

      if (es[i] == fn) return true;

    }

     }

    //阻止绑定事件

     return false;

    if (ev.preventDefault) {

    }

    ev.preventDefault();

     

    }else{

     

    //阻止普通事件

     

    return false;

     

    }

    //试行事件管理函数

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:时创新优品服 | JavaScript 事件包容性难点整理(

    关键词: 68399皇家赌场 JavaScript js