JQuery dblclick()用法及代碼示例

jQuery dblclick()是一個內置方法，用於觸發雙擊事件發生。當雙擊所選元素時會發生此方法。

用法:

$(selector).dblclick(args);

這裏“selector”是選定的元素。

參數：

它接受一個可選參數“args”，該參數指定雙擊後執行特定任務的函數。

jQuery 示例展示 dblclick() 方法的用法原理：

示例 1：在下麵的代碼中，沒有函數傳遞給此方法。

HTML


<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        //jQuery code to show dblclick method
        $(document).ready(function () {
            $("div").click(function () {
                $("div").dblclick();
            });
        });
    </script>
    <style>
        div {
            display: block;
            width: 370px;
            padding: 10px;
            font-size: 25px;
            border: 2px solid green;
            align-items: center;
        }
    </style>
</head>
<body>
    <!-- click on this div and a pop will appear -->
    <center>
        <div ondblclick="alert(
            'dblclick event has been triggered')">
            Click me to trigger dblclick event
        </div>
    </center>
</body>
</html>

輸出：

示例 2：在下麵的代碼中，該函數被傳遞給dblclick()方法。

HTML


<!DOCTYPE html>
<html>
   
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
   
    <script>
        <!--jQuery code to show dblclick method-->
            $(document).ready(function () {
                $("button").dblclick(function () {
                    $("p").fadeOut();
                });
            });
    </script>
   
    <style>
        p {
            display: block;
            padding: 20px;
            color: green;
            width: 300px;
            border: 2px solid green;
            font-size: 25px;
        }
    </style>
</head>
   
<body>
    <p>Welcome to GeeksforGeeks !</p>
    <!-- click on this button and above paragraph
            will disappear -->
    <button> Click Me! </button>
</body>
   
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自kundankumarjha大神的英文原創作品 jQuery dblclick() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。