JQuery mouseover mouseout && mouseenter mouseleave 的區別

時間 2019-11-08

標籤 jquery mouseover mouseout mouseenter mouseleave 區別欄目 JQuery 简体版

原文原文鏈接

用交互操做中，常常須要知道用戶操做鼠標是否有移到元素內部或是元素外部，所以jQuery提供了一個mouseenter和mouseleave的快捷方法能夠監聽用戶移動到內部的操做javascript

使用上很是簡單，三種參數傳遞方式與mouseover和mouseout是如出一轍的，因此這裏再也不重複，主要講講區別，下面以mouseenter爲例：html

mouseenter JavaScript事件是Internet Explorer專有的。因爲該事件在平時頗有用，jQuery的模擬這一事件，以便它可用於全部瀏覽器。該事件在鼠標移入到元素上時被觸發。任何HTML元素均可以接受此事件。java

mouseenter事件和mouseover的區別 jquery

關鍵點就是：冒泡的方式處理問題

簡單的例子：瀏覽器

mouseover爲例：ui

<div class="aaron2">
    <p>鼠標離開此區域觸發mouseleave事件</p>
</div>

若是在p元素與div元素都綁定mouseover事件，鼠標在離開p元素，可是沒有離開div元素的時候，觸發的結果:spa

p元素響應事件
div元素響應事件

這裏的問題是div爲何會被觸發？緣由就是事件冒泡的問題，p元素觸發了mouseover，他會一直往上找父元素上的mouseover事件，若是父元素有mouseover事件就會被觸發code

因此在這種狀況下面，jQuery推薦咱們使用 mouseenter事件htm

mouseenter事件只會在綁定它的元素上被調用，而不會在後代節點上被觸發。

參考 https://www.cnblogs.com/wymbk/p/5711715.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left div,
    .right div {
        width: 350px;
        height: 150px;
        padding: 5px;
        margin: 5px;
        border: 1px solid #ccc;
    }
    p{
        height: 50px;
        border: 1px solid red;
        margin: 30px;
    }
    .left div {
        background: #bbffaa;
    }
    .right div {
        background: yellow;
    }
    </style>
    <script src="jquery-3.3.1.js"></script>
</head>

<body>
    <h2>.mouseover()方法</h2>
    <div class="left">
        <div class="aaron1">
            <p>鼠標離開此區域觸發mouseover事件</p>
            <a>mouseover事件觸發次數：</a><br/>
            <a>mouseover冒泡事件觸發次數：</a>
        </div>
    </div>

    <h2>.mouseenter()方法</h2>
    <div class="right">
        <div class="aaron2">
            <p>鼠標進入此區域觸發mouseenter事件</p>
            <a>mouseenter事件觸發次數：</a><br/>
            <a>mouseenter冒泡事件觸發次數：</a>
        </div>
    </div>
    <br/>
   
    
    <script type="text/javascript">

        var i = 0;
        $(".aaron1 p").mouseover(function(e) {
            $(".aaron1 a:first").html('mouseover事件觸發次數：' + (++i))
        })

        var n = 0;
        $(".aaron1").mouseover(function() {
            $(".aaron1 a:last").html('mouseover冒泡事件觸發次數：' + (++n))
        })


    </script>


    <script type="text/javascript">

        var i = 0;
        $(".aaron2 p").mouseenter(function(e) {
            $(".aaron2 a:first").html('mouseenter事件觸發次數：' + (++i))
        })

        var n = 0;
        $(".aaron2").mouseenter(function() {
            $(".aaron2 a:last").html('mouseenter冒泡事件觸發次數：' + (++n))
        })

    </script>


</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。