js常见IE兼容问题以及兼容写法

open_book567

已于 2023-09-12 10:59:35 修改

阅读量874

点赞数 1

文章标签： javascript 前端

于 2023-04-25 14:43:56 首次发布

本文链接：https://blog.csdn.net/weixin_72392153/article/details/130364827

版权

本文介绍了JavaScript中处理字符串的charAt方法，实现滚动距离的浏览器兼容，获取元素行内样式的跨浏览器方法，以及事件对象event的兼容处理，包括target属性的获取、阻止事件冒泡和浏览器默认行为的方法，最后展示了事件监听的兼容写法。

摘要由CSDN通过智能技术生成

1. charAt()方法，用于字符串不支持[ ]中括号索引

'hello,word'.charAt(9) // 'd'

2. 滚动距离兼容写法

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

3. 获取行内样式

function getStyle(obj, name) {
    if(window.getComputedStyle) {
        // 非IE浏览器
        return getComputedStyle(obj,null)[name]
    } else {
        // 针对IE浏览器
        return obj.currentStyle[name]
    }
}

4. 事件对象event兼容

var obj = querySelector('getName')
obj.onclick = function(eve) {
	var e = eve || window.event
    // 执行体...
}

5. target 兼容写法(常用于事件委派里)

document.querySelector('ul').onclick = function(eve) {
	var e = eve || window.event
    var target = e.target || e.srcElement
    if(target.nodeName == 'LI') {
    	// 执行体...
    }
    if(target.className == 'GETUSER') {
    	// 执行体...
    }
    // 执行体...
}

6. 阻止冒泡兼容写法

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

7. 阻止浏览器默认行为

document.querySelector('li').onclick = function(eve) {
    // 只支持高版本浏览器
    // e.preventDefault()
    
    // IE9以下浏览器
    // e.returnValue = false
    
    // 企业开发推荐使用
    return false
}

8. 事件监听兼容写法

function addEvtListen(ele, type, callback) {
    if(ele.addEventListener) {
        ele.addEventListener(type,callback,false)  // 参数三表示是否允许冒泡
    } else if(ele.attachEvent) {
        // 兼容IE
        ele.attachEvent('on' + type,callback) // 只支持冒泡
    }
}