创建兼容 IE/FireFox 的 event 及 event 的 srcElement、fromElement、toElement 属性
来源:互联网 发布:网络运维绩效考核 编辑:程序博客网 时间:2024/06/05 09:10
自然,我们都习惯了 IE,在 IE 中要在函数中获得各事件对象很容易,直接用 event、event.srcElemtn、event.fromElement、event.toElement 就行了。在 FireFox 中获得触发事件的元素可以用 event.target,但其他两个 fromElement 和 toElement 就要费些周折。
所以,为了保持一致的使用方式,也为了保持原有的使用习惯,我们加入以下 JS 代码(代码有些紧凑,未加注释,应该很好理解):
<script language="javascript"> if (window.addEventListener) { FixPrototypeForGecko(); } function FixPrototypeForGecko() { HTMLElement.prototype.__defineGetter__("runtimeStyle", element_prototype_get_runtimeStyle); window.constructor.prototype.__defineGetter__("event", window_prototype_get_event); Event.prototype.__defineGetter__("srcElement", event_prototype_get_srcElement); Event.prototype.__defineGetter__("fromElement", element_prototype_get_fromElement); Event.prototype.__defineGetter__("toElement", element_prototype_get_toElement); } function element_prototype_get_runtimeStyle() { return this.style; } function window_prototype_get_event() { return SearchEvent(); } function event_prototype_get_srcElement() { return this.target; } function element_prototype_get_fromElement() { var node; if (this.type == "mouseover") node = this.relatedTarget; else if (this.type == "mouseout") node = this.target; if (!node) return; while (node.nodeType != 1) node = node.parentNode; return node; } function element_prototype_get_toElement() { var node; if (this.type == "mouseout") node = this.relatedTarget; else if (this.type == "mouseover") node = this.target; if (!node) return; while (node.nodeType != 1) node = node.parentNode; return node; } function SearchEvent() { if (document.all) return window.event; func = SearchEvent.caller; while (func != null) { var arg0 = func.arguments[0]; if (arg0 instanceof Event) { return arg0; } func = func.caller; } return null; }</script>
好了,现在不管是在 IE 中还是在 FireFox 中,触发事件后都有了 event、event.srcElement、event.fromElement、event.toElement 属性了。这就来做个测试吧:
<script> function test() { alert("event:" + event + ", srcElement:" + event.srcElement.innerHTML + ", fromElement:" + event.fromElement.innerHTML + ", toElement:" + event.toElement.innerHTML) }</script><button onmouseout="test()"> MouseOut</button><button onmouseover="test()"> MouseOver</button>
页面中有两个按钮 MouseOut 和 MouseOver,你掠过第一个按钮到第二个按钮上是,有看到这样内容的窗口:
从上图可以看出,其实我是在 Google 的 Chrome 浏览器中作的测试,也是有效的。标题虽说是兼容 IE 和 FireFox,但宽松点说就是 IE 和非 IE,因为 IE 总喜欢剑起偏锋,不按规范办事,不过这种事在 IE 8 中是收敛了许多。
0 0
- 创建兼容 IE/FireFox 的 event 及 event 的 srcElement、fromElement、toElement 属性
- 创建兼容 IE/FireFox 的 event 及 event 的 srcElement、fromElement、toElement 属性
- event.srcElement ,event.fromElement,event.toElement兼容问题
- FF下新增event对象的srcElement、fromElement、toElement三个属性
- IE firefox window.event.srcElement兼容
- IE的event.srcElement和Firefox的event.target
- IE的event.srcElement和Firefox的event.target
- IE的event.srcElement和Firefox的event.target
- IE的event.srcElement和Firefox的event.target
- HTML DOM Event 对象之(toElement、fromElement、event.srcElement、event.target)
- 兼容ie和 firefox的event事件
- 兼容IE和Firefox的event对象
- 兼容IE和Firefox的event对象
- srcElement,fromElement,toElement
- javascript,firefox,window,event,srcelement firefox下的window.event.srcelement;
- event.srcElement的用法
- event.srcElement的用法
- event.srcElement的用法
- Objective-C中的布尔类型的用法
- java中volatile关键字的含义
- error C2039: “sort”: 不是“std”的成员
- Maven 常用命令收集
- 当打开Delphi7,出现“borland license information was found,but it is not valid for delphi”的错误,无法运行的解决方法
- 创建兼容 IE/FireFox 的 event 及 event 的 srcElement、fromElement、toElement 属性
- UIAlertView 基础篇
- 数据库设计
- Radio开发新功能
- cas系列(二)--cas单点登录配置
- 如何使用OpenCV实现基于标记的定位(为什么对标记检测能够实现定位)
- ORA-01789: query block has incorrect number of result columns
- 重写QWidget关闭时触发的事件
- Android 自定义 按当前view的宽高进行矩形移动内容图