JS中出现的的兼容问题的总结（持续更新中）

末蓝、 2024-04-17 18:33 50阅读 0赞

普及：浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。俗话说：没有IE就没有伤害。  
![ie.png][]

内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本篇内容也会不断更新

## 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 ##

我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时:

我们一般通过这两个方法获取行外样式：

IE下: currentStyle

Chrome,FF下: getComputedStyle(oDiv,false)

function getStyle(ele,attr){
            if(ele.currentStyle){
                return ele.currentStyle[attr];
            }else{
                return getComputedStyle(ele,false)[attr];
            }
        }

## 2关于为一个元素绑定两个相同事件：attachEvent/attachEventLister 出现的兼容问题 ##

事件绑定:(不兼容需要两个结合做兼容if…else…)  
IE8以下用: attachEvent(‘事件名’,fn);  
FF,Chrome,IE9-10用: attachEventLister(‘事件名’,fn,false); //这个事件名没有on  
多事件绑定封装成一个兼容函数:

function addEvent(ele,type,cb){
            if(ele.addEventListener){
                ele.addEventListener(type,cb)
            }else if(ele.attachEvent){
                ele.attachEvent("on"+type,cb)
            }else{
                ele["on"+type] = cb;
            }
        }

## 3监听事件的删除 removeEventListener/detachEvent ##

function removeEvent(ele,type,cb){
            if(ele.removeEventListener){
                ele.removeEventListener(type,cb)
            }else if(ele.detachEvent){
                ele.detachEvent("on"+type,cb)
            }else{
                ele["on"+type] = null;
            }
        }

## 4关于使用 event对象，出现的兼容性问题 ##

ob.onclick=function(eve) {
            //事件对象的兼容写法
            var e=eve || window.event;

## 5取消默认事件 ##

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;\*\*[·][Link 1]

preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接，提交按钮等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

function stopDefault(e){
            if(e.preventDefault){
                e.preventDefault()
            }else{
                e.returnValue = false;
            }
        }

## 6取消冒泡事件 ##

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true\*\*[·][Link 1]

stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素

function stopBubble(e){
            if(e.stopPropagation){
                e.stopPropagation();
            }else{
                e.cancelBubble = true;
            }
        }

## 7事件源的兼容写法 ##

在事件中，当前操作的那个元素就是事件源。比如网页元素中a标签和input都有onclick事件，当点击a发生onclick事件时，事件源就是a标签，当点击input发送onclic事件是，事件源就是input。

如何获取事件源？

IE下：window.event.srcElement

标准下：event.target

由此可见，我们是通过事件对象获取到的事件源

ob.onclick=function(eve) {
            //事件源的兼容写法
            var e=eve || window.event;
            var t=e.target || e.srcElement;

## 8键盘事件的兼容写法 ##

IE下：event.which

标准下：event.keyCode

ob.onclick=function(eve) {
            //键盘事件的兼容
            var e=eve || window.event;
            var keyC=eve.keyCode || eve.which;

## 9 下面列数一些常见的keyCode值 ##

event.keyCode 返回当前按键的ASCII码

空格    32
    
        回车    13
    
        左      37
    
        上      38
    
        右      39
    
        下      40

ctrlKey 判断ctrl是否被按下，按下返回true

shiftKey 判断shift是否被按下，按下返回true

altKey 判断alt是否被按下，按下返回true

[ie.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODkwNTY5MC01MjI3ZmFkMGMyN2I3NDY3LnBuZw?x-oss-process=image/format,png
[Link 1]: http://caibaojian.com/javascript-stoppropagation-preventdefault.html