`

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

阅读更多
请看http://xuganggogo.iteye.com/admin/blogs/538476,有更简单解决方案。

 

假设一个div中有若干个子元素,在此div上设置onMouseOut()触发事件。会发现,鼠标经过此div的子元素时,onMouseOut()事件也同样会触发。这并不是我们想要的结果,应该做如下修改。
if (event.toElement) { 
    if (!this.contains(event.toElement)) { 
        alert('ok'); 
    } 
} 
 

 


在这里this是最外层的元素。  
event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素;
event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。
在IE下,以上方法可以通过。
分享到:
评论

相关推荐

    js 阻止子元素响应父元素的onmouseout事件具体实现

    但在一些场景下,我们需要在鼠标从子元素移出到父元素时不触发父元素的onmouseout事件,以避免不必要的响应。 在文档中提到的场景,就是要实现阻止子元素的onmouseout事件触发父元素的onmouseout事件。具体实现方法...

    JS鼠标键盘触发函数大全

    - **`onMouseOut`**:当用户的鼠标光标离开某个元素时触发。与`onMouseOver`相反。 - **兼容性**:IE4 | N3 | O3 #### 二、键盘事件 键盘事件用于响应用户的键盘输入行为。 - **`onKeyPress`**:当键盘上的某个键...

    onmouseover和onmouseout的一些问题思考

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

    javascript onmouseout 解决办法.docx

    具体来说,如果鼠标从目标元素移动到该元素的子元素上,那么 `relatedTarget` 或 `toElement` 将是指向子元素的,此时我们认为鼠标并没有真正离开目标元素。 ##### 示例代码 ```javascript function test(obj, e) ...

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

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

    javascript onmouseout 解决办法

    然而,由于`onmouseout`触发条件较为敏感,很容易在经过元素内的子元素时就被触发,从而导致一些预期之外的行为。例如,当鼠标在包含链接文字的层上移动时,鼠标只要接触到链接,就会触发`onmouseout`事件导致层隐藏...

    JavaScript每天必学之事件

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

    javascript解决IE6下hover问题的方法

    首先定义一个名为Hover的函数,该函数的作用是遍历id为"nav"的ul元素下的所有li子元素,并为它们分别添加onmouseover和onmouseout事件监听器。 4. 在onmouseover事件中,将当前元素的类名后添加"stest"字符串,从而...

    09JavaScript事件总结.docx

    当子元素事件触发时,事件冒泡到父元素,由父元素的监听器处理。这种方法减少了内存消耗,提高了性能。以下代码展示了如何使用事件委托来处理子元素的点击事件: ```javascript var box = document.getElementById...

    JavaScript事件处理

    - **事件委托**:通过将事件处理器绑定到父元素上,利用事件冒泡机制处理子元素的事件,提高效率。 - **事件监听器**:使用`addEventListener`和`removeEventListener`来添加和移除事件监听器,提供更好的控制和灵活...

    HTML中setCapture、releaseCapture 使用方法浅析

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

    javascript-cheat-sheet-v1

    - **onMouseOut**: 当鼠标移出元素时触发。 - **onMouseOver**: 当鼠标移到元素上时触发。 - **onMouseUp**: 当鼠标按钮被释放时触发。 - **onMove**: 当窗口移动时触发。 - **onReset**: 当表单被重置时触发。 - **...

    javascript事件问题

    接着,事件继续冒泡到外层的`<div>`元素,因为`<span>`是`<div>`的子元素。此时,会触发`<div>`的`mouseover`事件,弹出"hello"的提示框。 2. 当鼠标从`<div>`元素移动到`<span>`元素上时,首先会触发`<div>`的`...

    JS setCapture 区域外事件捕捉

    默认情况下,`setCapture`的bool参数为`true`,意味着容器会捕获容器内所有对象的鼠标事件,阻止这些事件在子元素上触发。如果将此参数设置为`false`,则容器内的对象可以正常处理和冒泡事件。 微软的MSDN文档中...

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

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

    兼容多种浏览器的下拉式二级菜单

    对于下拉效果,我们可以利用伪类`:hover`来触发显示子菜单。然而,不同浏览器对`:hover`的处理可能有所不同,特别是IE6不支持`:hover`在非链接元素上。为了解决这个问题,可以使用CSS条件注释或者JavaScript进行兼容...

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

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

    javascript 操作 dom 的常用方法

    在例子中,`attachEvent`用于绑定`onmouseover`和`onmouseout`事件,当鼠标悬停在元素上或离开元素时,元素的颜色和光标样式会改变。另一个例子展示了如何使用VBScript设置事件处理程序,当点击`mySpan`元素时,页面...

Global site tag (gtag.js) - Google Analytics