浏览器兼容性优化技巧与常用方法

以下是一些针对不同浏览器的技术封装和常用方法，旨在提升网页的跨浏览器兼容性。这些内容将持续更新完善...

事件处理函数

函数addEvent用于封装点击事件处理，适用于不同浏览器的事件绑定方式：
  ```javascript
  function addEvent(ele, type, handle) {
    if (ele.addEventListener) {
      ele.addEventListener(type, handle, false);
    } else if (ele.attachEvent) {
      ele.attachEvent('on' + type, function() {
        handle.call(div);
      });
    } else {
      ele['on' + type] = handle;
    }
  }```

取消事件冒泡函数

函数CancelBulle用于取消事件冒泡，适用于不同浏览器的事件冒泡控制：
  ```javascript
  function CancelBulle(event) {
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.CancelBulle();
    }
  }```

阻止默认事件

函数CancelDefaultHeader用于阻止默认事件，适用于不同浏览器的事件默认控制：
  ```javascript
  function CancelDefaultHeader(event) {
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  }```

求滚动条滚动距离

函数getScollOffSet用于获取滚动条滚动距离，适用于不同浏览器版本：
  ```javascript
  function getScollOffSet() {
    if (window.pageXOffset) {
      return {
        x: window.pageXOffset,
        y: window.pageYOffset
      };
    } else {
      return {
        x: document.body.scrollLeft + document.documentElement.scrollLeft,
        y: document.body.scrollTop + document.documentElement.scrollTop
      };
    }
  }```

求可视区大小

函数getViewPortOffSet用于获取可视区大小，适用于不同浏览器模式：
  ```javascript
  function getViewPortOffSet() {
    if (window.innerWidth) {
      return {
        w: window.innerWidth,
        h: window.innerHeight
      };
    } else if (document.compatMode == 'BackCompat') {
      return {
        w: document.body.clientWidth,
        h: document.body.clientHeight
      };
    } else {
      return {
        w: document.documentElement.clientWidth,
        h: document.documentElement.clientHeight
      };
    }
  }```

以上内容将持续更新，随时关注最新版本...

上一篇：两数之和

下一篇：浅克隆和深克隆

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

浏览器兼容性优化技巧与常用方法

事件处理函数

取消事件冒泡函数

阻止默认事件

求滚动条滚动距离

求可视区大小

发表评论

最新留言

关于作者

推荐文章