原生JS-浏览器兼容性问题总结

最新推荐文章于 2023-10-07 00:43:22 发布

蓝玉小轩

最新推荐文章于 2023-10-07 00:43:22 发布

阅读量1k

点赞数 1

分类专栏：原生JS小案例文章标签： javascript

本文链接：https://blog.csdn.net/lanyu_er/article/details/122276158

版权

原生JS小案例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细列举了在JavaScript中遇到的各种浏览器兼容性问题，包括获取元素、获取节点、获取元素样式、时间戳、去除字符串空格、数组方法、事件处理、事件源、鼠标位置、添加事件、阻止冒泡、阻止默认行为、按键事件对象属性、滚轮事件以及数组的indexOf方法。针对每个问题，都提供了相应的解决方案和兼容性封装函数，旨在帮助开发者解决在不同浏览器环境下遇到的兼容性挑战。

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

1、获取元素：

通用

document.getElementById('id名');
document.getElementsByTagName('标签名');

IE9+ 支持

document.getElementsByClassName('class名');
document.querySelector('#id/.className/tag');
document.querySelectorAll('#id/.className/tag');

解决方案

先通过通用获取元素的方法如下，获取目标元素的父级或自己或兄弟元素，再通过通用的节点获取方法获取目标元素。（获取节点方法见2）

2、获取节点

通用

parentNode		得到的是上级第一个父级 html 的父级打印document
offsetParent	得到第一个有定位的父级，从里到外查找
childNodes		得到的是所有孩子，是个集合（回车会造成文本节点）
children		仅返回所有子元素节点
firstChild		获取第一个子节点
lastChild		获取最后一个子节点
nextSibling		获取下一个兄弟节点（包含元素、文本节点）
previousSibling	获取上一个兄弟节点（包含元素、文本节点）

IE9+ 支持

firstElementChild		获取第一个子元素节点	
lastElementChild		获取最后一个子元素节点	
nextElementSibling		 获取下一个兄弟元素节点	
previousElementSibling	 获取上一个兄弟元素

Firefox 9 新引入:目前主流浏览器支持

parentElement 得到的是上级第一个父级元素html的父级打印null

3、获取元素样式

标准浏览器

window.getComputedStyle(元素).属性名

IE8及以下

元素.currentStyle.属性名

解决方案

原理：浏览器能力的判断

在IE9及以上，返回一个函数，在IE8及以下，返回 undefined

函数封装

function getStyle(ele, attr) {
    if (window.getComputedStyle) {
        // 标准浏览器
        return window.getComputedStyle(ele)[attr];
    } else {
        // IE8及以下
        return ele.currentStyle[attr];
    }
}

4、时间戳

通用

时间对象.getTime()

IE8及以下不支持

Date.now()

5、去除字符串左右空格

IE8及以下不支持

字符串.trim()

解决方案

封装方法

function trim(str) {
    var re = /^\s+|\s+$/g;
    return str.replace(re, '');
}

6、数组方法

IE8及以下不支持

数组.indexOf(要查找的项, 查找的起始位置);
数组.lastIndexOf(要查找的项, 查找的起始位置);

Array.isArray(参数) 作用：判断参数是否是一个数组，如果是，返回true，否则返回false

forEach没有返回返回值
map、filter返回数组
every、some返回布尔值

7、input事件（内容只要发生变化时触发的事件）

IE8及以下不支持

input.oninput = function () {
    console.log(this.value);
}

IE8及以下支持

input.onpropertychange = function () {
    console.log(this.value);
}

8、事件对象

谷歌和IE的事件对象是：全局的event对象

标准浏览器支持：事件函数的第一个参数通常记作ev

解决方案

var ev = ev || event; // 原理：浏览器能力的判断

9、事件源

IE支持：ev.srcElement

标准浏览器支持：ev.srcElement

解决方案

var target = ev.target || ev.srcElement; // 事件源兼容

10、鼠标相对于文档的位置

ev.pageX, ev.pageY 鼠标相对于文档的位置（IE8及以下不支持）

11、添加事件

IE8及以下不支持

元素.addEventListener(不要on的事件, 函数, 是否捕获); // 添加

元素.removeEventListener(不要on的事件, 函数, 是否捕获); // 解除

IE8及以下支持

元素.attachEvent(带on的事件, 函数); // 添加

元素.detachEvent(带on的事件, 函数); // 解除

解决方案

原理兼容原理：浏览器能力判断（在标准浏览器下返回函数，在IE8及以下返回undefined）

封装函数

添加绑定

// 添加绑定，参数：元素 事件 函数
function bind(ele, attr, callback) {
    if (ele.addEventListener) {
        ele.addEventListener(attr, callback, false);
    } else {
        ele.attachEvent('on' + attr, callback);
    }
}

解除绑定

// 解除绑定，参数：元素 事件 函数
function unbind(ele, attr, callback) {
    if (ele.removeEventListener) {
        ele.removeEventListener(attr, callback, false);
    } else {
        ele.detachEvent('on' + attr, callback);
    }
}

12、阻止冒泡

标准浏览器：ev.stopPropagation();
IE 浏览器：ev.cancelBubble = true;

解决方案

封装函数

原理兼容原理：浏览器能力判断

function stopPropagation(ev) {
    if (ev.stopPropagation) {
        // 标准浏览器
        ev.stopPropagation();
    } else {
        // IE8及以下
        ev.cancelBubble = true;
    }
}

13、阻止事件的默认行为

标准浏览器：ev.preventDefault();
IE8及以下：ev.returnValue = false;

解决方案

return false; 存在缺陷：return后的语句不再解析执行

封装函数

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

14、按键事件对象属性

IE8 及以下不支持

ev.key 具体的按键

解决方案：获取按键的ASCII编码：ev.keyCode

15、滚轮事件

事件

IE和标准浏览器：onmousewheel

火狐：DOMMouseScroll，必须用addEventListener绑定

滚轮方向

IE和标准浏览器：ev.wheelDelta

火狐：ev.detail

解决方案

封装函数

// 滚轮方向兼容  向上：120    向下：-120
function wheelDelta(ev) {
    if (ev.wheelDelta) {
        // IE和标准浏览器
        return ev.wheelDelta; // 向上：120    向下：-120
    } else {
        // 火狐
        return -40 * ev.detail; // 上：120     下：-120
    }
}

用（11、添加事件）中封装的方法统一

bind(div[i], 'mousewheel', fn); // IE和标准浏览器
bind(div[i], 'DOMMouseScroll', fn); // 火狐

16、数组 IndexOf() 方法

arr.IndexOf() IE9及以上支持

解决方案：重写数组原型上的方法

原理：浏览器能力的判断 Array.prototype.indexOf IE8 及以下打印 undefined

if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(val, index) {
        index = typeof index === 'undefined' ? 0 : index;
        for (var i = index; i < this.length; i++) {
            if (this[i] === val) {
                return i;
            }
        }
        return -1;
    }
}