自然,我们都习惯了 IE,在 IE 中要在函数中获得各事件对象很容易,直接用 event、event.srcElemtn、event.fromElement、event.toElement 就行了。在 FireFox 中获得触发事件的元素可以用 event.target,但其他两个 fromElement 和 toElement 就要费些周折。
所以,为了保持一致的使用方式,也为了保持原有的使用习惯,我们加入以下 JS 代码(代码有些紧凑,未加注释,应该很好理解):
<script language="javascript">
//addEventListener是为一个事件添加一个监听,使用方法见http://cindylu520.iteye.com/admin/blogs/588652
//此处if判断是否是火狐浏览器
if(window.addEventListener) { FixPrototypeForGecko(); }
function FixPrototypeForGecko()
{
//prototype属性允许你向一个对象添加属性和方法
//__defineGetter__和__defineSetter__是Firefox的特有方法,可以利用来它自定义对象的方法。
//使用方法见:http://cindylu520.iteye.com/admin/blogs/588667
//runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性!
HTMLElement.prototype.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle);
//代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态。
window.constructor.prototype.__defineGetter__("event",window_prototype_get_event);
//event.srcElement当前事件的源,IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的
Event.prototype.__defineGetter__("srcElement",event_prototype_get_srcElement);
//当前事件有移动成分时,如onmouseover、onmouseout等fromElement、toElement表示移动事件的两个端点
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;
//relatedTarget 事件属性返回与事件的目标节点相关的节点。
//对于 mouseover 事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点。
//对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。
//对于其他类型的事件来说,这个属性没有用。
//详情:http://cindylu520.iteye.com/admin/blogs/588678
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 中是收敛了许多。
(转自:http://kb.cnblogs.com/b/286274/)
分享到:
相关推荐
event和srcElement说明,方法,技巧.doc
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]下面是关于ie与firefox event的详细区别window.event IE:有window.event对象 FF:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=...
event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 ...
这也造成了在不同的浏览器中处理event的差异,这里结合一些零碎的代码来说明如何做到event在IE4+和Firefox下的正常工作。首先看如下代码: 代码如下: function doEventThing(eventTag){ var event = eventTag||...
因为ie的event是全局的而firefox...获取ie的srcElement或firefox的target Event.isIe();是否为ie Event.clientX(); 获取ie,fox的鼠标x坐标 Event.clientY();获取 ie,fox的鼠标y坐标 */ var Event=new function(){ this.
只要在外层上写一个 然后检查event.srcElement.tagName或其他属性是不是你想要的来决定是否响应事件就可以了.不过好像event.srcElement在ff里不起作用 </p> 比如</p> <input value="input"> <span>span...
先了解几个事件对象属性target 指事件源对象,点击嵌套元素最里层的某元素,该元素就是target。IE6/7/8对应的是srcElement。currentTarget 指添加事件...IE6/7/8中对应的是fromElement,toElement。mouseenter ,m
1、firefox和ie事件event处理 在ie中,事件对象是作为一个全局变量来保存和维护的。 所有的浏览器事件,不管是用户触发 的,还是其他事件, 都会更新window.event 对象。 所以在代码中,只要轻松调用 window.event 就...
只要在外层上写一个 然后检查event.srcElement.tagName或其他属性是不是你想要的来决定是否响应事件就可以了.不过好像event.srcElement在ff里不起作用 比如 span div event对象指当前触发的事件对象, window.event...
Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: firefox 下的 event.target = IE 下的 event.srcElement 解决方法 使用obj = event.srcElement ? event.srcElement : event....
getEvent()方法可模拟window.event效果
eWebEditor不支持IE8/IE7的解决方法(2009-10-29 15:16:52)转载标签: ifie7editorico 分类: 网页技巧 问题文件:WebEditor/editor.js 方法一: 替换editor.js中的 函数BtnMouseUp function ...
注意获取的标记都以大写表示,如”TD”,”TR”,”A”等 代码如下: ”div_001″> <form id=”form_001″>...select name=”selectname” onchange=”alert(event.srcElement.options[event.srcElement.selec
1. 如何阻止事件冒泡 代码如下://非IE if (event && event.stopPropagation) event.stopPropagation();... } else { //Firefox alert(event.target.tagName + “:” + event.target.id); }
1.event.srcElement 代码如下: //srcElement只能在IE下使用target是FireFox使用的,下面是兼容性写法 var obj = e.srcElement ? e.srcElement : e.target; 2.e.originalEvent.x 代码如下: // e.originalEvent.x 只能...
更多的文章可以参考 //www.jb51.net/tag/event/1.htm另外ie中使用srcElement去获得事件触发源,ff下使用target。因此使用这两个对象时需要做相关的浏览器兼容。 srcElement –//www.jb51.net/ 点击 [Ctrl+...
Firefox uses event.target here, MSIE uses event.srcElement */ var target = ev.target || ev.srcElement; var mousePos = mouseCoords(ev); // mouseOut event - fires if the item the mouse is on has ...
代码如下: [removed] function tdclick(){ if(event.srcElement.tagName.toLowerCase()==’td’) alert(“行:”+(event.srcElement[removed].rowIndex+1)+”列:”+(event.srcElement.cellIndex+1)); } ...
7. firefox与IE的父元素(parentElement)的区别 3 8. document.formName.item(”itemName”) 问题 3 9. 集合类对象问题 3 10. 自定义属性问题 3 11. input.type属性问题 3 12. event.srcElement问题 3 13. body...