自己开始用javascript源代码写js,前天遇到一个问题。只有当鼠标从div中移开的时候才会触发onmouseout事件,可是,事实上,当我们移到div中的元素时就会触发onmousout事件。也就是说,移到对象的子对象上,也算onmouseout了。这件事让我郁闷了好久。
解决方法:
<script type="text/javascript">
function test(obj, e) {
if (e.currentTarget) {
if (e.relatedTarget != obj) {
//e.relatedTarget为event的相关节点
if (obj != e.relatedTarget.parentNode) {
alert(1);
}
}
} else {
if (e.toElement != obj) {
if (obj != e.toElement.parentNode) {
alert(1);
}
}
}
}</script><div onmouseout="test(this, event)" style="width:100px;height:100px;border:1px #666 solid"><span style="margin:5px;width:100%;height:100%;border:1px #ff0000 solid">好好学习了</span></div></body></html>
分享到:
相关推荐
### JavaScript 下关于 `onmouseout` 与事件冒泡的问题经验小结 #### 一、引言 在前端开发过程中,事件处理是不可或缺的一部分。其中,`onmouseout` 事件和事件冒泡机制尤为关键,它们涉及到用户交互以及页面元素...
这种方法通过自定义 `mouseleave` 事件处理器来解决 `onmouseout` 事件过度触发的问题。其核心思想是在 `onmouseout` 事件触发时检查目标元素与鼠标移入的新元素之间的关系,只有当鼠标移入的元素不是目标元素的后代...
本文将深入探讨两个常见的鼠标事件:`onmouseover`和`onmouseout`,以及它们在不同浏览器中的行为差异,以及如何解决由此引发的问题。 `onmouseover`事件会在鼠标指针进入一个元素时触发,包括进入该元素的任何子...
问题是这样的:一个div元素要触发onmouseout事件,同时这个div内部还有子元素,于是当鼠标移动到该div的子元素上时,onmouseout事件也被触发了。在要做浮动层效果的时候会经常遇到这个问题。 解决方法一: 使用...
为了解决`onmouseout`事件的敏感性问题,可以通过编写一些额外的JavaScript代码来控制事件的触发。具体方法可以分为以下几点: 1. 验证目标元素是否真的离开了触发事件的元素。这可以通过`event.currentTarget`和`...
为了解决这个问题,W3C引入了`relatedTarget`属性,该属性在`mouseover`事件中表示鼠标来自哪个元素,在`mouseout`事件中表示鼠标去往哪个元素。通过检查`relatedTarget`,我们可以判断鼠标是否真正离开了父元素。 ...
在前端开发中,鼠标经过效果是一个非常常用的交互效果,然而不同的浏览器对其支持的方式不同,这就需要我们使用不同的方法来解决这个问题。 首先,让我们来了解一下onmouseover和onmouseout事件。onmouseover事件是...
其中之一便是“onmouseout”事件,它会在鼠标指针移出元素范围时被触发。但在一些场景下,我们需要在鼠标从子元素移出到父元素时不触发父元素的onmouseout事件,以避免不必要的响应。 在文档中提到的场景,就是要...
在网页设计中,`onmouseover` 和 `onmouseout` 是两个非常重要的JavaScript事件,它们用于实现用户交互功能,特别是创建动态效果和提供额外信息。在这个特定的案例中,这两个事件被用来控制一个div元素,使其根据...
鼠标移上去显示别的东西,离开恢复原样;通过传递参数实现此功能
而onmouseout事件则是在鼠标指针从一个元素移出时触发的事件,用于处理鼠标移出指定元素后的逻辑,例如清除之前显示的鼠标坐标信息。 在提供的代码示例中,定义了两个函数:myFunction和clearCoor。myFunction函数...
这里主要涉及到了四个事件:`ondocumentready`、`onmouseover`、`onclick` 和 `onmouseout`。接下来,我们将逐一解析这些事件及其相关功能。 ### 1. `ondocumentready` 事件 在网页开发中,`ondocumentready` 事件...
在网页开发中,兼容性问题始终是一个挑战,尤其是在处理不同浏览器对特定事件或CSS属性的支持时。本篇文章将探讨如何实现一个简短的兼容IE和Firefox的鼠标经过事件(onmouseover和onmouseout)的解决方案。 首先,...
一直想实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上,今晚终于有时间实现它。此功能就是当鼠标经过时RadioButtonList或CheckBoxList每一个Item时,让Item有特效显示,离开时,恢复原样。...