JQuery--Mouseover和Mouseenter 的区别

最新推荐文章于 2023-11-21 08:47:56 发布

spring19840513

最新推荐文章于 2023-11-21 08:47:56 发布

阅读量3k

点赞数

分类专栏： JavaScript 文章标签： button function float class html div

本文链接：https://blog.csdn.net/spring19840513/article/details/7329351

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
  $("div.over").mouseover(function(){
    $("#id_span").text(x+=1);
  });
  $("div.enter").mouseenter(function(){
    //$(".enter span").text(y+=1);
    $("#id_span2").text(y+=1);
  });
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span id="id_span"></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span id="id_span2"></span></h2>
</div>
</body>
</html>

在同一个空间中mouseover优先于mouseenter执行。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script src="lib/jquery.js"></script>
        <script src="js/example_action.js"></script>
        <title>Untitled Document</title>
        <script>
            var x = 0;
            $(document).ready(function(){
                $("button").focus(function(){
                    $("button").css("background-color", "red");
                });
                
                $("button").mouseover(function(){
                    $("#message").append("mouseover\n");
                    $("button").css("background-color", "blue");
                });
                
                $("button").mouseenter(function(){
                    $("#message").append("mouseenter\n");
                    $("button").css("background-color", "yellow");
                });
                
                $("button").click(function(){
                    $("#message").append("button click!\n");
                });
                
                $("button").dblclick(function(){
                    $("#message").append("button dblclick!\n");
                });
                
                $("#id_div").mouseover(function(){
                    $("#message").text(x+1);
                });
            });

        </script>
    </head>
    <body>
        <p>This is example action</p>
        <p id="message"></p>
        <button type="button">focus me red, mouse over blue, click me disapper!</button>
    </body>
</html>