那些年我封装的 JS 函数

2024年4月25日 112次阅读 来源: 天才樱木花道
  1. 给标签增加或移出类名

肯定有人会说，添加类名可以用obj.classList.add呀，是的，这没有错。但我也说了，这些我积累的函数都是兼容性极佳的方式，也就是说，不管是 ie 的多低版本，也是没多大问题的，而且这些自己实现的功能确实对初学者帮助不少。

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 () {

  //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;
  }

};


未完待续 ， 有时间就更新
    原文作者：天才樱木花道
    原文地址: https://segmentfault.com/a/1190000017257632
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞