`
cindylu520
  • 浏览: 147603 次
  • 性别: Icon_minigender_2
  • 来自: 大连
社区版块
存档分类
最新评论

relatedTarget 事件属性

    博客分类：
  • JS
JavaScriptHTML 
阅读更多

定义和用法

relatedTarget 事件属性返回与事件的目标节点相关的节点。

对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。

对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。

对于其他类型的事件来说，这个属性没有用。

语法

event.relatedTarget

 

 

实例

下面例子可返回指针刚刚离开的元素：

 

<html>
<head>
<script type="text/javascript">
function getRelElement(event)
  {
  var txt="The cursor just exited the ";
  txt=txt + event.relatedTarget.tagName + " element.";
  alert(txt);
  }
</script>
</head>
<body>

<p onmouseover="getRelElement(event)">
Mouse over this paragraph.</p>

</body>
</html>

 

 

 

分享到：
| __defineGetter__和__defineSetter__
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Javascript中的事件--Event对象

    - **`relatedTarget`**：对于某些事件（如`mouseover`和`mouseout`），`relatedTarget`属性提供了进入或离开的相邻元素。 ### 6. 兼容性问题 Internet Explorer（IE）对`Event`对象的支持与其他现代浏览器存在差异...

    event事件的使用及说明

    - **relatedTarget**：在mouseover/mouseout事件中，指向离开或进入的元素。 ### 4. **IE特有的属性** - **cancelBubble**：在IE中，设置为true可以阻止事件冒泡。 - **srcElement**：相当于非IE浏览器的`target`...

    js-event事件

    - **`relatedTarget`**: 在`mouseover`和`mouseout`事件中，表示鼠标从哪个元素移到了哪个元素。 综上所述，理解`Event`对象及其属性和方法对于开发动态交互式的Web应用至关重要。通过灵活运用这些知识，可以有效地...

    jquery 事件对象属性小结

    4. **relatedTarget**：对于鼠标事件，此属性表示鼠标触发事件时，鼠标离开或进入的元素。 5. **pageX/Y**：这两个属性提供了鼠标相对于页面原点的水平和垂直坐标。 6. **result**：此属性表示上一个事件处理函数...

    浅谈JavaScript事件的属性列表

    - `relatedTarget`：与事件的目标节点相关的节点，例如在`mouseout`和`mouseover`事件中。 - `screenX` 和 `screenY`：表示鼠标在屏幕上的水平和垂直坐标。 - `shiftKey`：如果事件发生时`Shift`键被按下，该属性为`...

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

    `relatedTarget`属性在`mouseover`事件触发时指向鼠标离开的那个元素，在`mouseout`事件触发时则指向鼠标进入的那个元素。 `relatedTarget`属性的使用使得我们可以编写通用的代码来判断事件是否真的应该被处理。...

    onmouseover事件和onmouseout事件全面理解

    为了解决这个问题，W3C引入了`relatedTarget`属性，该属性在`mouseover`事件中表示鼠标来自哪个元素，在`mouseout`事件中表示鼠标去往哪个元素。通过检查`relatedTarget`，我们可以判断鼠标是否真正离开了父元素。 ...

    通过event对象的fromElement属性解决热区设置主实体的一个bug

    `relatedTarget`属性同样表示事件源元素，但在不同类型的事件中，它可能表示的是进入或离开事件的目标元素。在处理`mouseover`事件时，如果`relatedTarget`不是当前热区的一部分，那么我们可以认为是用户从提示框的...

    JavaScript和JQuery的鼠标mouse事件冒泡处理

    在实际应用中，合理使用`stopPropagation()`、`relatedTarget`属性和`contains`方法可以有效地控制事件冒泡，使得事件处理器的触发符合预期的逻辑。JQuery为这一过程提供了更多便利，但其核心原理与原生JavaScript是...

    jQuery源码分析之Event事件分析

    5. 如果浏览器没有提供`event.relatedTarget`属性，但提供了`event.fromElement`，jQuery会根据这些信息来计算出正确的`event.relatedTarget`值。 6. 如果`event.pageX`和`event.pageY`缺失，jQuery会根据`event....

    javascript中mouseover、mouseout使用详解

    通过获取事件对象中的relatedTarget属性来确定鼠标是从哪个元素移动到当前元素的。如果鼠标是从子元素移动到当前元素，则可以不执行事件处理函数中的相关操作。 具体实现可以是定义一个isMouseLeaveOrEnter函数，该...

    js中最容易被忽视的事件问题大总结

    即将所有与事件相关的函数，融合在一起的一个容器，方便管理事件对象，它没有属性。主要处理DOM事件和IE事件的磨合，使其尽可能的相似。 下面我们来看一下DOM和IE之间的对象属性和方法做个对比（这里只指出两者之间...

    给moz-firefox下添加IE方法和属性

    - **offsetX 和 offsetY**: 这两个属性返回相对于触发事件的元素的水平和垂直偏移量，等同于IE中的`layerX`和`layerY`。 ##### 2. 修正Document对象 虽然文中未给出具体的Document对象修正代码，但可以参考以下...

    易被忽视的js事件问题总结

    即将所有与事件相关的函数，融合在一起的一个容器，方便管理事件对象，它没有属性。主要处理DOM事件和IE事件的磨合，使其尽可能的相似。 下面我们来看一下DOM和IE之间的对象属性和方法做个对比（这里只指出两者之间...

    js 实现一些跨浏览器的事件方法详解及实例

    本文将详细介绍如何使用JavaScript实现跨浏览器的事件绑定、移除以及事件属性的获取，并提供一个实用的跨浏览器事件对象封装。 ### 跨浏览器事件绑定 要实现一个跨浏览器的事件绑定，我们需要检查目标元素是否支持...

    js中的event对象1

    - `relatedTarget`：在某些特定事件（如`mouseover`和`mouseout`）中，表示与当前元素相关的元素。 - `timeStamp`：事件发生的时间戳。 2. 键盘事件对象（KeyboardEvent）： - `key`：表示按下的键的名称，如"k...

    jQuery事件对象总结

    4. event.relatedTarget属性可以用来获取鼠标在触发当前事件之前指向的元素。例如，在mouseover事件中使用它来找出鼠标移入前的位置： ```javascript $("div").mouseover(function(e){ console.log(e....

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

    文章通过获取触发onmouseout事件的元素，利用event对象的toElement属性（IE）和relatedTarget属性（Firefox）来判断。接下来，文章说明了如何在Firefox中通过扩展HTMLElement原型定义contains方法来判断一个元素是否...

    javascript经典特效---下拉菜单导航(三).rar

    注意这里使用了`relatedTarget`属性来判断鼠标是否离开主菜单区域，防止快速移动鼠标导致子菜单频繁闪烁。 此外，为了实现更流畅的动画效果，还可以引入CSS3的过渡（transition）和定时器（setTimeout）。通过修改...

Magicbox
Global site tag (gtag.js) - Google Analytics