那些年我封裝的 JS 函數

  1. 給標籤增長或移出類名

確定有人會說,添加類名能夠用obj.classList.add呀,是的,這沒有錯。但我也說了,這些我積累的函數都是兼容性極佳的方式,也就是說,無論是 ie 的多低版本,也是沒多大問題的,並且這些本身實現的功能確實對初學者幫助很多。chrome

function addClass(ele, className){
    var reg = new RegExp("\\b"+className+"\\b");
    if(!reg.test(ele.className)){
        /* 若是元素 ele 不包含 className */
        ele.className += " "+className;
    };
};

function removeClass(ele, className){
    if(ele.className){
        var reg = new RegExp("\\b"+className+"\\b");
        var classes = ele.className;
        ele.className = classes.replace(reg, "");
        if(/^\s*$/g.test(ele.className)){
            ele.removeAttribute("class");
        };
    }else{
        ele.removeAttribute("class");
    }
};

2.滾輪事件函數


滾輪事件也是 PC 端主流網站必須實現的功能,一般咱們會配合咱們本身寫的滾動條禁止掉系統的滾動條來使用。可是,滾輪事件跟咱們想象的略有不一樣,它是 firefox 一種綁定,反而 ie 和 chrome 是同樣的。網站

window.onload = function () {firefox

//ie/chrome
  document.onmousewheel = function(event){
      scrollMove(event,callback)
  }
  //firefox
  if(document.addEventListener){
    document.addEventListener('DOMMouseScroll',function(event){
        scrollMove(event,callback)
    });
  }

  function scrollMove(event,callback) {
    event = event || window.event;
    var flag = '';
    if(event.wheelDelta){
      //ie/chrome
      if(event.wheelDelta > 0){
        //上
        flag = 'up';
      }else {
        //下
        flag = 'down'
      }
    }else if(event.detail){
      //firefox
      if(event.detail < 0){
        //上
        flag = 'up';
      }else {
        //下
        flag = 'down'
      }
    }

    switch (flag){
      case 'up':
        if (callback && callback['wheelUp'] == 'function') {
            callback.wheelUp()
        }          
        break;
      case 'down':
        
        break;
    }

    //取消默認行爲
    event.preventDefault && event.preventDefault();
    return false;
  }

};
未完待續 , 有時間就更新
相關文章
相關標籤/搜索