浏览器常用的兼容

最新推荐文章于 2022-07-09 15:17:41 发布

lzwya

最新推荐文章于 2022-07-09 15:17:41 发布

阅读量164

点赞数

本文链接：https://blog.csdn.net/lzwya/article/details/105545082

版权

浏览器常用的兼容

// 滚动事件   当文档的滚动条滚动时触发该事件
window.onscroll = function () {

    // 获取滚动条距离文档顶端的位置
    // 低版本ie    window  document   body 
    //            window  document  html  body 

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(scrollTop);

    // 获取滚动条距离文档左边的位置
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    // console.log(scrollLeft);

}

//文档的实际高度
document.documentElement.scrollHeight || document.body.scrollHeight;

//文档的实际宽度
document.documentElement.scrollWidth || document.body.scrollWidth;

// 窗口的可视高度
document.documentElement.clientHeight || document.body.clientHeight;

// 窗口的可视宽度
document.documentElement.clientWidth || document.body.clientWidth;

封装parent的第一个孩子的方法
function first(parent) {
return parent.firstChild || parent.firstElementChild;
}
封装parent最后一个孩子的方法
function last(parent) {
return parent.lastChild || parent.lastElementChild;
}

封装的获取前一个元素方法的兼容
function before(ele) {
return ele.previousElementSibling || ele.previousSibling;
}

封装的获取后一个元素方法的兼容
function next(ele) {
return ele.nextElementSibling || ele.nextSibling;
}

之作属性取值作用不能赋值
function getStyle(ele, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele)[attr];
} else {
return ele.currentStyle[attr];
}
}

//点击事件的兼容（按下鼠标：onmousedown,松开鼠标：onmouseup,点击：onclick,鼠标移动onmousemove，鼠标离开：onmouseout 键盘按下事件onkeydown等）

~.οnclick=function(e){
var e=e||window.event;
}
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
document.onmousemove = function (evt) {
var evt = evt || window.event;
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
//keyCode(判断哪个键被按下 )的兼容（左上右下 37 38 39 40）
var keyCode=e.keyCode||e.which;
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
//阻止事件冒泡的方法和兼容
if(e.stopPropagation){
e.stopPropagation();//常规浏览器阻止事件冒泡的方法
}else{
e.cancelBubble=true;//IE浏览器阻止事件冒泡的方法
}
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

//阻止form 的默认提交的兼容
if（e.preventDefault）{
e.preventDefault();//常规浏览器
e.returnValue=false;//IE浏览器
}

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
阻止a标签的默认跳转
方法一：给href设置 href=“javascripe：；”
方法二：阻止a标签的默认跳转兼容
方法三：return false；

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
利用事件监听绑定事件
// 添加事件监听
// ele.addEventListener(eventType,callback); //常规浏览器

// attach  附上，贴上    
// ele.attachEvent("on"+eventType,callback)  //IE 浏览器

// 删除事件监听
// ele.removeEventListener(eventType,callback);  //常规浏览器

//  detach  分离，拆开 
//  ele.detachEvent("on"+eventType,callback)   //IE 浏览器

// 添加事件监听的兼容
function addEvent(ele, eventType, callback) {
if (ele.addEventListener) {//常规浏览器
ele.addEventListener(eventType, callback);
} else { //IE 浏览器
ele.attachEvent(“on” + eventType, callback);
}
}

// 删除事件监听的兼容
function removeEvent(ele, eventType, callback) {
    if (ele.removeEventListener) {//常规浏览器
        ele.removeEventListener(eventType, callback);
    } else { //IE 浏览器
        ele.detachEvent("on" + eventType, callback);
    }
}

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。