js中常见的兼容问题

最新推荐文章于 2023-09-05 22:27:43 发布

qq_41604155

最新推荐文章于 2023-09-05 22:27:43 发布

阅读量384

点赞数

CC 4.0 BY-SA版权

文章标签： js 兼容

本文链接：https://blog.youkuaiyun.com/qq_41604155/article/details/87078082

本文提供了多种跨浏览器兼容性的解决方案，包括阻止事件冒泡、获取元素样式、元素选择器、事件监听器封装、阻止默认行为等技巧，适用于IE及现代浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.阻止事件冒泡

ie浏览器不兼容stopPropagation()方法
在这里插入图片描述

2.获取外行样式

funtion getStyle(node,styleType){
            if(node.currentStyle){
            	  //ie浏览器兼容方法
                return node.currentStyle[styleType];
            }else{
                return getComputedStyle(node)[styleType];
            }
        }

3.获取className节点的元素

function elementsByClassName(node, className){
	var res = [];
	//1、查找node所有的子节点
	var nodes = node.getElementsByTagName("*");
	for(var i = 0; i < nodes.length; i++){
		if(nodes[i].className == className){
			res.push(nodes[i]);
		}
	}
	return res;
	
}

4.target事件属性

var target = e.target || window.event.srcElement;

5.event

var e = event || window.event;

6.scrollTop滚动条距离和clientWidth

在这里插入图片描述

7.事件监控器兼容写法封装

//跨浏览器添加事件
function addEvent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + type, fn);
}
}
//跨浏览器移除事件
function removeEvent(obj, type, fn) {
if (obj.removeEventListener) {
obj.removeEventListener(type, fn, false);
} else if (obj.detachEvent) {
obj.detachEvent('on' + type, fn);
}
}

8.阻止默认形为

function preDef(e){
	if(e.preventDefault){
		e.preventDefault();
	}else{
		window.event.returnValue = false;
	}
}