请看http://xuganggogo.iteye.com/admin/blogs/538476,有更简单解决方案。
在FireFox下,处理onMouseOut() 经过子元素也触发的问题与IE下大不相同,而且步骤比较多。
1,首先FF不支持,event.toElement 和 event.formElement , 但是我们可以自己让FF支持,如下
//创建兼容 IE/FireFox 的 event 及 event 的 srcElement、fromElement、toElement 属性----start
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;
}
2,FF不支持contains方法,但是有compareDocumentPosition方法。
function mouseoutIM( evt ){
var res= evt.compareDocumentPosition(event.toElement) ;
if( ! ( res == 20 || res == 0) ){
alert('ok');
}
}
}
3,compareDocumentPosition()方法说明
NodeA.compareDocumentPosition(NodeB)
这个方法是 DOM Level 3 specification 的一部分,允许你确定 2 个 DOM Node 之间的相互位置。这个方法比 .contains() 强大。这个方法的一个可能应用是排序 DOM Node 成一个详细精确的顺序。
使用这个方法你可以确定关于一个元素位置的一连串的信息。所有的这些信息将返回一个比特码(Bit,比特,亦称二进制位)。
对于那些,人们知之甚少。比特码是将多重数据存储为一个简单的数字(译者注:0 或 1)。你最终打开 / 关闭个别数目(译者注:打开/关闭对应 0 /1),将给你一个最终的结果。
这里是从 NodeA.compareDocumentPosition(NodeB) 返回的结果,包含你可以得到的信息。
Bits Number Meaning 000000 0 元素一致 000001 1 节点在不同的文档(或者一个在文档之外) 000010 2 节点 B 在节点 A 之前 000100 4 节点 A 在节点 B 之前 001000 8 节点 B 包含节点 A 010000 16 节点 A 包含节点 B 100000 32 浏览器的私有使用 |
现在,这意味着一个可能的结果类似于:
<div id="a"> <div id="b"></div> </div> <script> alert( document.getElementById("a").compareDocumentPosition(document.getElementById("b")) == 20); </script> |
一旦一个节点 A 包含另一个节点 B,包含 B(+16) 且在 B 之前(+4),则最后的结果是数字 20 。如果你查看比特发生的变化,将增加你的理解。
000100 (4) + 010000 (16) = 010100 (20)
这个,毫无疑问,有助于理解单个最混乱的 DOM API 方法。当然,他的价值当之无愧的。
分享到:
相关推荐
这种行为在某些情况下可能会导致意外的触发,特别是当元素内包含其他子元素时,用户在子元素间移动鼠标会导致父元素不断触发`onmouseover`和`onmouseout`事件,这并非总是我们期望的行为。 例如,假设有一个包含子...
这是由于javascript自身的冒泡特性导致的(即在子元素上触发了事件,并冒泡到了父元素-堆栈后进先出算法)。今天在网上搜了一下,找了以下的解决办法(兼容IE和Firefox)。 在IE下解决问题很简单,用onMouseEnter、...
此外,由于事件冒泡机制,子元素触发的事件会被父元素捕获,因此可以利用这一特性来简化代码。 事件触发对象动作的技巧在实际开发中非常实用,特别是在大型项目中,可以避免大量重复的事件绑定代码,提高性能。学习...
文中也提供了一个示例代码,演示了如何在ul元素上使用事件委托来处理li子元素的鼠标进入(mouseover)和鼠标离开(mouseout)事件。通过判断事件的目标节点(event.target)是否是li元素,来决定是否要改变背景色。 ...
因此,即使鼠标移出按钮,只要仍在元素的子元素范围内,`onmouseover`和`onmouseout`事件仍然会被触发。 2. 在`onclick`事件中,为什么不能永久锁定鼠标事件? 当在`onclick`事件中调用`setCapture()`,该捕获只...
通过将事件处理器绑定到父元素,而不是每个单独的子元素,即使在运行时动态添加新的`li`元素,它们也会自动获得这些事件处理能力。这是大事托付的一个主要好处:新添加的元素无需额外设置事件监听器就能响应事件。 ...
在非IE浏览器,如Mozilla Firefox中,可以使用`window.captureEvents(Event.eventType)`和`window.releaseEvents(Event.eventType)`来实现类似的功能。这两个方法分别用于开启和关闭整个窗口的事件捕获。 下面是一...
所有主流浏览器都支持 HTML li 标签,包括 Google Chrome、 Mozilla Firefox、Microsoft Edge、Safari 等。 DTD 之间的差异 ----------------- 在 HTML 4.01 中,li 元素的 "type" 和 "value" 属性是不被赞成使用...
这两个事件的特殊性在于,它们会频繁触发,并且在触发时,浏览器会同时检查目标元素和相关目标元素(即鼠标进入或离开的子元素),这导致了事件冒泡行为的复杂性。 在IE浏览器中,提供了`onmouseleave`和`...
5. **浏览器兼容性**:确保代码在主流浏览器(如IE7、8、9,Firefox,Chrome,2345浏览器等)中都能正常工作,可能需要使用条件注释或jQuery等库来处理浏览器之间的差异。 HTML代码示例中,我们看到每个包含二级...
这两个函数通过获取当前`<li>`元素的子元素`<ul>`并改变其`display`样式属性来实现下拉菜单的显示和隐藏。 5. **CSS布局**: 为了实现导航条的布局,使用了`float:left`使`<li>`元素水平排列,并使用`position:...