前端常见兼容问题总结

前端常见兼容问题总结

1. 火狐浏览器不支持css zoom属性
2. 火狐浏览器不支持innerText
3. 浏览器事件绑定及event对象使用
4. 浏览器阻止事件冒泡及默认事件

火狐浏览器不支持css zoom属性

需求是根据鼠标滚动放大缩小图片

• 一般浏览器可以使用css的zoom属性对图片进行放大缩小。

<img class="can-move-img" src="" onmousewheel="return bbimg(this)">
function bbimg(o){
	var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+'%';
	return false;
}

• 火狐浏览器兼容方法：

<img class="can-move-img" src="">
 $('.can-move-img').each((i,e)=> {
     if(document.addEventListener){
           $(e)[0].addEventListener('DOMMouseScroll',scrollFunc,false);
     }
})

function scrollFunc(e) {
    e = e || window.event;
    if(e.wheelDelta){
    }else if(e.detail){//Firefox
        var img = $(this);
        var event = event || window.event;
        event.preventDefault();
        //判断鼠标是向上滚动还是向下滚动
        //event.detail是forfix浏览器，向上滚动为-3，其他浏览器相反
        var dir = (event.detail < 0 ) ? 'Up' : 'Down';
        var width = img.css('width');
        var height = img.css('height');
        var num1 = parseInt(height)
        var num =parseInt(width);//将宽度提取出来
        dir == 'Up' ? num += num * .25 : num -= num / 4;
        dir == 'Up' ? num1 += num1 * .25 : num1 -= num1 / 4;
        img.css('width', num);
        img.css('height', num1);
    }    
}

火狐浏览器不支持innerText

火狐浏览器使用textContent替代了innerText

if(navigator.appName.indexOf("Explorer")>-1){
    document.getElementById('aa').innerText = "A";
}else{
    document.getElementById('aa').textContent = "A";
}

浏览器事件绑定及event对象使用

IE浏览器绑定事件需要使用dom.attachEvent()，其他浏览器可以用dom.addEventListener 。

---

IE浏览器事件解绑也不一样，需要使用dom.detachEvent()，其他浏览器可以使用 dom.removeEventListener()

IE中event对象拥有srcElement属性，但是没有target属性，而在火狐浏览器中，event对象有target属性，但没有srcElement属性。
兼容写法：
var srcObj =event.srcElement ?event.srcElement : event.target;

浏览器阻止事件冒泡及默认事件

• 阻止冒泡

e. stopPropagation();//标准浏览器
event.canceBubble=true;//ie9 之前

---

• 阻止默认事件

return false // ie
e.preventDefault(); //标准浏览器

其他内容可参考博客 （总结的很全面）
https://juejin.cn/post/6844903493161975822