Events-Mouse Events

Posted on Edited on In Views: Disqus:

 

一、.click()

當按下滑鼠左鍵又釋放後，將會觸發事件。

 

二、.contextmenu()

當按下滑鼠右鍵又釋放後，將會觸發事件。

 

三、.dblclick()

當連續按下滑鼠左鍵又釋放後，將會觸發事件。

 

四、.hover()

當滑鼠移到某元素的上方時，將會觸發事件。

 

五、.mousedown()

當滑鼠按下時，將會觸發事件。

 

六、.mouseenter()

當滑鼠從外面進入元素區域裡時，將會觸發事件。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        #inner {
            width: 50px;
            height: 50px;
            background-color: red;
        }

        #outer {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="outer">
        Outer
        <div id="inner">
            Inner
        </div>
    </div>
    <div id="other">
        Trigger the handler
    </div>
    <div id="log"></div>

    <script>
        $("#outer").mouseenter(function () {
            $("#log").append("<div>Handler for .mouseenter() called.</div>");
        });
        $("#other").click(function () {
            $("#outer").mouseenter();
        });
    </script>
</body>
</html>

 

七、.mouseleave()

當滑鼠從元素區域裡面離開時，將會觸發事件，此與.mouseenter()相對。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        #inner {
            width: 50px;
            height: 50px;
            background-color: red;
        }

        #outer {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="outer">
        Outer
        <div id="inner">
            Inner
        </div>
    </div>
    <div id="other">
        Trigger the handler
    </div>
    <div id="log"></div>

    <script>
        $("#outer").mouseleave(function () {
            $("#log").append("<div>Handler for .mouseenter() called.</div>");
        });
        $("#other").click(function () {
            $("#outer").mouseleave();
        });
    </script>
</body>
</html>

 

八、.mousemove()

當滑鼠移動時將會觸發事件。

 

九、.mouseout()

當滑鼠從元素區域裡面離開時，將會觸發事件，

跟.mouseleave()的觸發時機一樣，但再加上滑鼠在子元素的進出也會觸發。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        #inner {
            width: 50px;
            height: 50px;
            background-color: red;
        }

        #outer {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="outer">
        Outer
        <div id="inner">
            Inner
        </div>
    </div>
    <div id="other">
        Trigger the handler
    </div>
    <div id="log"></div>

    <script>
        $("#outer").mouseout(function () {
            $("#log").append("<div>Handler for .mouseenter() called.</div>");
        });
        $("#other").click(function () {
            $("#outer").mouseout();
        });
    </script>
</body>
</html>

 

十、.mouseover()

當滑鼠從外面進入元素區域裡時，將會觸發事件，

跟.mouseenter()的觸發時機一樣，但再加上滑鼠在子元素的進出也會觸發。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        #inner {
            width: 50px;
            height: 50px;
            background-color: red;
        }

        #outer {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="outer">
        Outer
        <div id="inner">
            Inner
        </div>
    </div>
    <div id="other">
        Trigger the handler
    </div>
    <div id="log"></div>

    <script>
        $("#outer").mouseover(function () {
            $("#log").append("<div>Handler for .mouseenter() called.</div>");
        });
        $("#other").click(function () {
            $("#outer").mouseover();
        });
    </script>
</body>
</html>

 

十一、.mouseup()

當滑鼠按鍵上彈時，將會觸發事件。

 

十二、.toggle()

has been deprecated