停止事件冒泡在各浏览器中已经有相应的解决方案,但是对于mouseover和mouseout却显得力不从心。
在IE里有onmouseleave和onmouseenter, 而对于要兼容各大浏览器的Web开发人员来说还是一件头疼的事。
虽然网上已经有针对Mozilla Firefox的一些计策,但代码量也是不容乐观的。
想寻求比较好的解决方案,于是就翻遍了国内的大小网站,终一无所获,不得不硬着头皮去读国外网站,结果是理想的,因为W3C里有relatedTarget,于是就有了下边的解决方案:
function isMouseLeaveOrEnter(e, handler) {
if (e.type != 'mouseout' && e.type != 'mouseover') return false;
var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
while (reltg && reltg != handler)
reltg = reltg.parentNode;
return (reltg != handler);
}
在onmouseover和onmouseout里做如上判断。
分享到:
相关推荐
为了解决跨浏览器的`mouseover`和`mouseout`事件冒泡问题,开发者们采用了各种方法。例如,可以利用W3C标准中的`relatedTarget`属性来获取与事件相关的元素。`relatedTarget`属性在`mouseover`事件触发时指向鼠标...
4. 解决方案实施:文章提出使用mouseenter和mouseleave来替换mouseover和mouseout,以此来解决触发问题。这样,当鼠标在id1和id2之间移动时,id2的显示和隐藏状态会按照预期执行,不会因为事件冒泡而出现意外的变化...
本文详细探讨了如何在不同浏览器中使用mouseover和mouseout,以及如何处理事件冒泡中的兼容性问题。 首先,传统方法使用mouseover和mouseout事件处理鼠标指针在元素之间移动时,存在一个事件冒泡的问题。在子元素上...
在本文中,我们将深入探讨`mouseout`和`mouseover`事件以及它们与事件冒泡相关的常见问题,同时提供一种有效的解决方案。 `mouseout`和`mouseover`事件是两种常用的DOM(文档对象模型)事件,用于追踪用户鼠标在...
标题提到的问题是,当鼠标经过子元素时,意外触发了父元素的`mouseout`和`mouseover`事件,从而影响了预期的效果。下面将详细讨论这个问题以及解决方案。 首先,我们需要了解`mouseover`和`mouseout`事件的工作原理...
然而,当这些事件被绑定到一个包含子元素的父元素上时,问题就出现了:当鼠标在子元素之间移动时,会连续触发 `mouseover` 和 `mouseout` 事件,这被称为事件冒泡或捕获。这种行为可能会导致不必要的处理,甚至在...
在上述代码中,当鼠标离开 `#div1` 时,会执行 `mouseout` 函数,并通过调用 `event.stopPropagation()` 来阻止事件继续向上冒泡。这样,只有在鼠标真正离开 `#div1` 时才会隐藏 `#div2`。 #### 四、总结 通过上述...
2. **鼠标滑过事件**:在JavaScript中,我们可以使用`mouseover`和`mouseout`事件来响应用户将鼠标光标移动到某个元素上方或离开该元素。`mouseover`触发时,光标进入元素或其子元素;`mouseout`则在光标离开元素...
通常,hover事件结合了mouseover和mouseout两个动作。然而,在旧版本的Internet Explorer(IE)浏览器中,使用hover事件时可能会遇到一个问题,即鼠标快速移动到触发下拉菜单时,菜单项会不停闪烁。这通常是由于...
mouseout事件会在鼠标移出子元素时冒泡到父元素,触发父元素的mouseout事件,而mouseleave则只在鼠标完全离开元素时触发,不考虑子元素的情况。 由于mouseenter和mouseleave在非IE浏览器中不被支持,我们需要使用...
mouseenter 只在鼠标进入元素自身时触发,不包括子元素,对应的移除事件分别为 mouseout 和 mouseleave。 8. **JS 的 new 操作符**:new 关键字创建一个新对象,该对象的原型链指向构造函数的 prototype,并将新...
1.4.1版本中,`bind()` 还支持同时绑定多个事件类型,如 `bind("mouseover mouseout", function() {...})`。 **`live()` 方法** `live()` 方法允许动态添加的元素也能响应事件。它通过监听祖先元素的事件,然后...
常见的事件有点击(click)、鼠标悬停(mouseover/mouseout)、键盘输入(keydown/keyup)等,通过添加和移除事件监听器来响应用户交互。 7. **闭包**:闭包是JavaScript中一种强大的特性,它可以访问其自身范围内...
3. **事件处理**:理解事件模型(捕获、冒泡)、事件对象、事件委托以及常用事件(click、mouseover、mouseout、keydown等)。 4. **AJAX与Fetch API**:掌握如何使用XMLHttpRequest或Fetch API进行异步请求,理解...
3. **事件处理**:理解jQuery中的事件绑定,如`click()`, `mouseover()`, `mouseout()`等,并了解事件冒泡和事件委托的概念。 4. **动画效果**:掌握`fadeIn()`, `fadeOut()`, `slideToggle()`等动画方法,以及`...
这可以使用JavaScript事件监听器,比如`mouseover` 和 `mouseout` 来实现。当鼠标进入表格行时,添加高亮类,离开时移除。开发者可能需要创建一个CSS类,如`.highlight-row`,然后在JavaScript中动态地将这个类添加...
12. **DOM事件**:深入研究`click`、`mouseover`、`mouseout`、`keydown`等常见DOM事件,以及自定义事件的触发和监听。 13. **类型转换**:理解JavaScript的弱类型特性,学习如何进行类型检查和转换。 14. **错误...
- 事件:如click、mouseover、mouseout、keydown等,它们响应用户的操作。 - 事件处理程序:包括addEventListener和removeEventListener,支持多个事件处理函数。 - 事件冒泡与事件捕获:理解这两个概念对于正确...