onmouseover有个特别BT的特性,如果在对象中包含一个子对象,鼠标从父亲对象挪动到子对象的时候会触发父亲对象的onMouseout事件,在很多的时候,这个鸟特性让人很难受,因为这个时候我们的浮动层、弹出的模拟层就不能正常的工作,在以前,我采用的是不合理的timeout事件触发自动进行隐藏的伪操作,而今,碰上一个DOCK窗口的问题,必须屏蔽这个鸟特性带来的副作用
所幸的是,我找到了解决办法
if(!this.contains(event.toElement))this.style.display="none";
这里有个特殊的event. toElement,这个对象很少有人关注,至少比起他的孪生兄弟srcElement来说,他的知名度实在太低了,DHTML手册中这么介绍这个对象的:Sets or retrieves a reference to the object toward which the user is moving the mouse pointer.这个对象好像只有在鼠标事件中存在????
资料显示:对于onmouseover和onmouseout时间中,IE附加了两个对象fromElement和toElement,前者指定鼠标来自的元素,后者指定鼠标去向的元素。onmouseover事件中,toElement总是等于srcElement,onmouseout事件中fromElement总是等于srcElement。
从脚本中可以得到,我们判断时间的toELement对象是否包含在当前的对象中即可,呵呵,注意,此处使用的函数是contains,从脚本定义Checks whether the given element is contained within the object. 中可以得到,这个函数是为了检查是否对象中包含一个子对象而存在。问题在于,这个函数是否支持嵌套的对象包含?例如
<div id="A">
<div id="B">
<div id="C">
</div>
</div>
</div>
<script defer>
var a=document.getElementById("A");
var b=document.getElementById("B");
var c=document.getElementById("C");
alert(
"c contains a ="+c.contains(a)+"\r\n"+
"a contains b ="+a.contains(b)+"\r\n"+
"a contains c ="+a.contains(c)+"\r\n"+
"b contains c ="+b.contains(c)+"\r\n");
</script>
诸位看官对第一个判断c contains a肯定能够得出正确的结论是false,而后面的a contains c =?,幸运的是,返回的是true.事实证明,这个函数是可以嵌套执行的。
问题似乎得到了完美的解决,实际上不是,在实际应用中,我使用动态创建的一个层,然后包含一个下拉列表,对层的onmouseout事件做如上的处理,目的是为了弹出一个供用户输入的界面,问题就出在这个下拉列表上,这个下拉列表一展开就触发层的onmouseout时间,反复跟踪,得到一个简单的结论,在弹出下拉列表下拉框鼠标挪动到下拉框中的时候,这个鸟下拉框居然不属于下拉列表的对象,我靠!
到现在为止,我没有找到解决办法。