博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
跨浏览器的事件对象
阅读量:6063 次
发布时间:2019-06-20

本文共 1660 字,大约阅读时间需要 5 分钟。

虽然IE的事件对象与DOM的事件对象存在差异,但是IE事件对象中所包含的信息和能力,与DOM事件对象是相同的,只是表现形式不同而已,通过映射的方式,我们可以实现兼容IE和DOM事件对象的事件对象.

  

var eventUtil = {	getEvent : function(event){		return event ? event : window.event; 			};	getTarget : function(event){		return event.target || event.srcElement;	};	preventDefault : function(event){		if(event.preventDefault){			event.preventDefault();		}else{			event.returnValue = false;		}	};	stopPropagation : function(event){		if(event.stopPropagation){			event.stopPropagation();		}else{			event.cancelBubble = true;		}	};};

  当使用一个DOM兼容的浏览器时,event 变量仅仅是传入并被返回,在IE中event参数将是undefined ,因此window.event将会被返回,所以采用eventUtil.getEvent()方法无论在dom还是IE上event返回值都是可用的。

  同理第二个方法,getTarge()方法,先检测event对象的target属性,如果存在,则返回targe,若为IE浏览器则返回srcElement属性。保证兼容性。

btn.onclick = function(event){event = EventUtil.getEvent(event);var target = EventUtil.getTarget(event);};

  第三个方法,preventDefault ()方法,当event对象传入时,先检测event对象的preventDefault()方法是否可用,若可用则调用preventDefault方法,若不可用将event的returnValue 设置为false。

  例如:

  

var link = document.getElementById(“myLink”);     link.onclick = function(event){     event = EventUtil.getEvent(event);     EventUtil.preventDefault(event);};

  这段代码阻止了一个link标签的默认行为,event对象来自于EventUtil的getEvent方法的返回值 并作为preventDefault()方法的传入参数。

  第四个方法stopPropagation(),用同样的方法,首先尝试DOM方法,之后尝试cancelBubble属性,例如下面的代码:

  

var btn = document.getElementById(“myBtn”);btn.onclick = function(event){alert(“Clicked”);event = EventUtil.getEvent(event);EventUtil.stopPropagation(event);};document.body.onclick = function(event){alert(“Body clicked”);};

  记得这个方法可能阻止事件在浏览器的冒泡阶段 或者 同时阻止事件在浏览器的冒泡和捕获阶段。  

  

转载于:https://www.cnblogs.com/MrBackKom/archive/2012/06/24/2559983.html

你可能感兴趣的文章
MySQL-备份
查看>>
#puppet#个人实践
查看>>
数据中心架构
查看>>
mysql查询区分大小写
查看>>
索引上
查看>>
Centos开机自启动redis
查看>>
连接linux 系统导入数据 设置utf-8 的putty
查看>>
CCIE-MPLS基础篇-实验手册
查看>>
CCNA+NP学习笔记—序章
查看>>
令人眼前一亮的下拉式终端 Tilda & Guake
查看>>
好记性不如烂笔头,极光向你发出征文邀请函
查看>>
【过程积累】iOS上面做持续集成
查看>>
shell中if条件字符串、数字比对,[[ ]]和[ ]区别
查看>>
51CTO_Blog_URL
查看>>
不能忽视的//TODO 注释
查看>>
002. 深入JVM学习—JVM对象访问模式
查看>>
IntelliJ IDEA for Mac 快捷键整理
查看>>
400错误,使用springmvc前台ajax请求后台400错误
查看>>
centos7上win2003 virtio (openstack)镜像制作成功(图文详解)
查看>>
nodejs做的端口测试
查看>>