那些年我封装的 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;
  }

};
未完待续 , 有时间就更新
相关文章
相关标签/搜索