event.relatedTarget是jQuery中的内置属性,用于查找正在输入的元素或在鼠标移动时退出的元素。
用法:
event.relatedTarget
参数:它不接受任何参数,因为它是属性而不是函数。
返回值:它返回在鼠标移动时要输入或退出的元素。
jQuery代码显示event.relatedTarget属性的工作方式:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
<!-- jQuery code to show working of this property -->
$(document).ready(function() {
$("div, p").mouseenter(function(event) {
$("#d2").html("Pointer at : " + event.relatedTarget.nodeName);
});
});
</script>
<style>
#d1 {
height: 100px;
width: 50%;
padding: 10px;
border: 2px solid green;
}
#d2 {
height: 20px;
width: 50%;
padding: 10px;
margin-top: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<!-- this is outer div element -->
<div id="d1">
<!-- this is inner div element -->
<div>This is a div element </div>
<!-- this is paragraph element -->
<p style="background-color:lightgreen">This is a paragraph</p>
</div>
<div id="d2" />
</body>
</html>
输出:
在鼠标指针移到div元素上之前,
将鼠标指针移到div元素上之后,
相关用法
- JQuery jQuery.support用法及代码示例
- JQuery jQuery.fx.interval用法及代码示例
- JQuery jquery用法及代码示例
- JQuery jQuery.fx.off用法及代码示例
- JQuery length用法及代码示例
- JQuery context用法及代码示例
- JQuery event.target用法及代码示例
- JQuery event.namespace用法及代码示例
- JQuery event.which用法及代码示例
- JQuery event.currentTarget用法及代码示例
- JQuery event.data用法及代码示例
- JQuery event.delegateTarget用法及代码示例
- JQuery event.timeStamp用法及代码示例
- JQuery event.pageX用法及代码示例
注:本文由纯净天空筛选整理自kundankumarjha大神的英文原创作品 jQuery | event.relatedTarget Property with Example。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。