jQuery event.relatedTarget属性

jQuery event.relatedTarget属性

jQuery的event.relatedTarget是一个内置的属性,用于寻找哪个元素被进入或在鼠标移动时被退出。

语法:

event.relatedTarget

参数:它不接受任何参数,因为它是一个属性而不是一个函数。

例子1:这个例子展示了event.relatedTarget属性的工作。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <!--jQuery code to show working of this property-->
    <script>
            (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"></div>
</body>
  
</html>

输出:

jQuery event.relatedTarget属性

例子2:在这个例子中,当鼠标从一个元素上退出时,将显示一个弹出窗口。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <!--jQuery code to show working of this property-->
    <script>
            (document).ready(function () {
                ("div, p").mouseenter(function (event) {
                    (this).animate({ fontSize: "+=14px"});
                });
                ("div, p").mouseleave(function (event) {
                    $(this).animate({ fontSize: "-=14px"});
                    alert("Pointer at : " 
                        + event.relatedTarget.nodeName);
                });
            });
    </script>
    <style>
        #d1, #d2 {
            background-color: lightgreen;
            height: 30px;
            width: 50%;
            padding: 10px;
            margin-top: 10px;
            border: 2px solid green;
        }
    </style>
</head>
  
<body>
    <div id="d1">
        Geeksforgeeks
    </div>
    <p id="d2">
        A computer science portal
    </p>
</body>
  
</html>

输出:

jQuery event.relatedTarget属性

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程