event.relatedTarget

event.relatedTarget 1.1.4追加

戻り値:Element

イベントに関与している別の要素を取得します。

デモ

mouseoutイベントであれば、マウスが外れた先の要素情報を取得します。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<p style="background-color:yellow; height:50px; width:100px; margin-bottom:-5px;">P要素</p>
<a href="#">アンカーリンク</a>
<div style="background-color:green; height:50px; width:100px; margin-top:-5px;">DIV要素</div>

<script>
$("a").mouseout(function(event) {
  alert(event.relatedTarget.nodeName + '要素へ移動しました。');
});
</script>

</body>
</html>

mouseoverイベントであれば、直前にマウスポインタが乗っていた要素情報を取得します。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<p style="background-color:yellow; height:50px; width:100px; margin-bottom:-5px;">P要素</p>
<a href="#">アンカーリンク</a>
<div style="background-color:green; height:50px; width:100px; margin-top:-5px;">DIV要素</div>

<script>
$("a").mouseover(function(event) {
  alert(event.relatedTarget.nodeName + ' 要素から来ました。');
});
</script>

</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM