【Day 17】jQuery事件中的Mouse Events 鼠标事件

7.Mouse Events 鼠标事件
click() 当滑鼠停在元素上方，按下并松开滑鼠左键（不包含右键），就会发生一次 click 事件。
dblclick() 在很短的时间内发生两次click，即是一次double click 事件。
hover() 是mouseenter()和mouseleave() 方法的组合。

</style>

<div></div>
<span>Double click the block</span>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, qui ullam nostrum molestiae mollitia consectetur blanditiis voluptatem obcaecati odit consequuntur deserunt amet fugit? Omnis doloribus eligendi fugit nemo nisi rem.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia culpa commodi saepe voluptate, sunt nesciunt veritatis nisi maiores illum quod cum dolores modi dicta error repellendus dolore reiciendis adipisci iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti voluptatibus quae voluptatum! Unde enim, rem dicta accusantium ut, blanditiis id debitis, quas temporibus molestiae explicabo veniam aliquid itaque beatae quaerat.</p>
<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class="fade">Chips</li>
    <li class="fade">Socks</li>
</ul>

<script>
    $(document).ready(function () {
        $("p").click(function () { 
            $( this ).slideUp();                
        });
    });

    $(document).ready(function () {
        var divdbl = $( "div" ).first();
        divdbl.dblclick(function() {
            divdbl.toggleClass( "dbl" );
        });
    });

    $(document).ready(function () {            
        $( "li" ).hover(
            function() {
                $( this ).append( $( "<span> ***</span>" ) );
            }, function() {
                $( this ).find( "span" ).last().remove();
                }
            );

            $( "li.fade" ).hover(function() {
                $( this ).fadeOut( 100 );
                $( this ).fadeIn( 500 );
            });
        });
        
</script>

mousedown() 当滑鼠移动到元素上方并按下滑鼠（左、右键均可）时，就会触发发生 mousedown 事件。
mouseup() 当放开滑鼠按键（左、右键均可）时，就会触发发生 mouseup 事件。
mouseenter() 当滑鼠移动碰触到元素，就会触发发生 mouseenter 事件。
mouseleave() 当滑鼠离开元素，就会触发发生 mouseleave 事件。
mouseover() 当滑鼠经过元素或子元素，就会触发发生 mouseover 事件。
mouseout() 当滑鼠离开元素或子元素，就会触发发生 mouseout 事件。
若在同一个元素上按下并松开滑鼠左键，会依次触发mousedown、mouseup、click，前一个事件执行完毕才会执行下一个事件。
若在同一个元素上按下并松开滑鼠右键，会依次触发mousedown、mouseup，前一个事件执行完毕才会执行下一个事件，不会触发click事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="js/jquery-3.5.1.min.js"></script>
    <style>
        div.out {
          width: 30%;
          height: 120px;
          margin: 0 15px;
          background-color: #d6edfc;
          float: left;
        }
        div.in {
          width: 50%;
          height: 60%;
          background-color: #fc0;
          margin: 10px auto;
        }
        p {
          line-height: 1em;
          margin: 0;
          padding: 0;
        }
    </style>
        
    <div class="out overout">
    <p>move your mouse</p>
    <div class="in overout"><p>move your mouse</p><p>0</p></div>
    <p>0</p>
    </div>
       
    <div class="out enterleave">
    <p>move your mouse</p>
    <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
    <p>0</p>
    </div>
       
    <script>
    var i = 0;
    $( "div.overout" )
    .mouseover(function() {
        $( "p", this ).first().text( "mouse over" );
        $( "p", this ).last().text( ++i );
    })
    .mouseout(function() {
        $( "p", this ).first().text( "mouse out" );
    });
       
    var n = 0;
    $( "div.enterleave" )
    .mouseenter(function() {
        $( "p", this ).first().text( "mouse enter" );
        $( "p", this ).last().text( ++n );
    })
    .mouseleave(function() {
        $( "p", this ).first().text( "mouse leave" );
    });
    </script>

    <p>Press mouse and release here.</p>
 
    <script>
    $( "p" )
    .mouseup(function() {
        $( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
    })
    .mousedown(function() {
        $( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
    });
    </script>    
    
</body>
</html>

<<: [Day17]Love Calculator

>>: 电子书阅读器上的浏览器 [Day17] 利用 Room 强化书签功能

【Day 17】jQuery事件中的Mouse Events 鼠标事件

Day 1 - 写「好」程序是什麽样的感觉？

[Day 24] Node Event loop 3

Day 21: Convolutional Neural Networks — 卷积神经网路初探(下)

Day 22 - 天眼CNN 的耳朵和嘴巴 - RNN(3) -GRU

[Day29] 後端13：後端Code总结

[Java Day16] 4.4. 回传值

Day10【Web】网路攻击：CSRF

D-04-开始测试 ? mstest ? specflow

快速新增范例资料

Day28-用jQuery写得出ToDoList吗_3_id的重要性与作用