`

onMouseOut() 经过子元素也触发的问题( FireFox)

阅读更多

请看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的一些问题思考

    这种行为在某些情况下可能会导致意外的触发,特别是当元素内包含其他子元素时,用户在子元素间移动鼠标会导致父元素不断触发`onmouseover`和`onmouseout`事件,这并非总是我们期望的行为。 例如,假设有一个包含子...

    javascript中onmouse事件在div中失效问题的解决方法

    这是由于javascript自身的冒泡特性导致的(即在子元素上触发了事件,并冒泡到了父元素-堆栈后进先出算法)。今天在网上搜了一下,找了以下的解决办法(兼容IE和Firefox)。 在IE下解决问题很简单,用onMouseEnter、...

    js活用事件触发对象动作

    此外,由于事件冒泡机制,子元素触发的事件会被父元素捕获,因此可以利用这一特性来简化代码。 事件触发对象动作的技巧在实际开发中非常实用,特别是在大型项目中,可以避免大量重复的事件绑定代码,提高性能。学习...

    JavaScript每天必学之事件

    文中也提供了一个示例代码,演示了如何在ul元素上使用事件委托来处理li子元素的鼠标进入(mouseover)和鼠标离开(mouseout)事件。通过判断事件的目标节点(event.target)是否是li元素,来决定是否要改变背景色。 ...

    HTML中setCapture、releaseCapture 使用方法浅析

    因此,即使鼠标移出按钮,只要仍在元素的子元素范围内,`onmouseover`和`onmouseout`事件仍然会被触发。 2. 在`onclick`事件中,为什么不能永久锁定鼠标事件? 当在`onclick`事件中调用`setCapture()`,该捕获只...

    javascript大事托付的用法及其好处简析_.docx

    通过将事件处理器绑定到父元素,而不是每个单独的子元素,即使在运行时动态添加新的`li`元素,它们也会自动获得这些事件处理能力。这是大事托付的一个主要好处:新添加的元素无需额外设置事件监听器就能响应事件。 ...

    JS setCapture 区域外事件捕捉

    在非IE浏览器,如Mozilla Firefox中,可以使用`window.captureEvents(Event.eventType)`和`window.releaseEvents(Event.eventType)`来实现类似的功能。这两个方法分别用于开启和关闭整个窗口的事件捕获。 下面是一...

    HTML li 标签.docx

    所有主流浏览器都支持 HTML li 标签,包括 Google Chrome、 Mozilla Firefox、Microsoft Edge、Safari 等。 DTD 之间的差异 ----------------- 在 HTML 4.01 中,li 元素的 "type" 和 "value" 属性是不被赞成使用...

    javascript mouseover、mouseout停止事件冒泡的解决方案

    这两个事件的特殊性在于,它们会频繁触发,并且在触发时,浏览器会同时检查目标元素和相关目标元素(即鼠标进入或离开的子元素),这导致了事件冒泡行为的复杂性。 在IE浏览器中,提供了`onmouseleave`和`...

    JavaScript实现下拉菜单的显示和隐藏

    5. **浏览器兼容性**:确保代码在主流浏览器(如IE7、8、9,Firefox,Chrome,2345浏览器等)中都能正常工作,可能需要使用条件注释或jQuery等库来处理浏览器之间的差异。 HTML代码示例中,我们看到每个包含二级...

    带有css3动画效果的兼容多浏览器简单导航条示例

    这两个函数通过获取当前`&lt;li&gt;`元素的子元素`&lt;ul&gt;`并改变其`display`样式属性来实现下拉菜单的显示和隐藏。 5. **CSS布局**: 为了实现导航条的布局,使用了`float:left`使`&lt;li&gt;`元素水平排列,并使用`position:...

Global site tag (gtag.js) - Google Analytics