jQuery 事件 dblclick() 方法

jQuery 事件dblclick()方法用於在選定元素上發生雙擊事件時觸發操作。

您可以使用此方法來觸發 dblclick（雙擊）事件，或附加一個在事件發生時執行的函式。此方法還可以用於將處理程式與事件繫結或在指定的元素上觸發。

語法

以下是 jQuery 事件dblclick()方法的語法：

$(selector).dblclick(function)

引數

此方法接受一個可選引數“函式”，如下所述：

函式（可選） - 當 dblclick 事件發生時要執行（執行）的函式。

返回值

此方法不返回值，但將處理程式與事件繫結。

示例 1

以下程式演示了 jQuery 事件dblclick()方法的用法：

<html>
    <head>
        <script type = "text/javascript" src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
      <style>
        .demo{
            background-color: green;
            padding: 10px;
            width: 200px;
            color: white;
        }
      </style>
    </head>
<body>
    <p>Double-click on the below div element to trigger an event.</p>
    <div class="demo">
        Double-click on me!
    </div>
    <script>
        $('div').dblclick(function(){
            alert("dblclick event ouccured");
        });
    </script>
</body>
</html>

輸出

上述程式顯示一條訊息，一旦我們雙擊該訊息，瀏覽器螢幕上將出現一個警報彈出訊息：

當用戶雙擊顯示的訊息時：

示例 2

以下是 jQuery 事件dblclick()方法的另一個示例。我們使用此方法來觸發一個操作（執行加法運算），每當使用者雙擊選定的元素（即按鈕）時：

<html>
    <head>
        <script type = "text/javascript" src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
    </head>
<body>
    <span></span>
    <p></p>
    <button>Double click to find sum</button>
    <script>
        let a = Number(10);
        let b = Number(20);
        document.querySelector('span').innerHTML = "a = " + a + ", b = " + b;
        $('button').dblclick(function(){
            document.querySelector('p').innerHTML = "Sum is: " + (a + b);
        });
    </script>
</body>
</html>

輸出

程式執行後，它將顯示兩個變數 a 和 b，其值分別為10和20。當用戶雙擊按鈕時，將顯示這些變數的和：

當用戶雙擊顯示的按鈕時：

示例 3

在下面的示例中，我們使用 jQuery 事件dblclick()方法將處理程式與事件繫結，當用戶雙擊指定的元素時，該元素的“背景顏色”將發生更改：

<html>
    <head>
        <script type = "text/javascript" src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
      <style>
        div{
            width: 300px;
            padding: 10px;
            text-align: center;
            background-color: rgb(84, 182, 150);
            color: white;
        }
      </style>
    </head>
<body>
    <div class="change">Double click to change background color</div>
    <script>
        $('div').dblclick(function(){
            $(this).css("background-color", "blue");
        });
    </script>
</body>
</html>

輸出

程式執行後，它將顯示一條背景顏色為紅色的訊息。當用戶雙擊此訊息時，背景顏色將更改為藍色：

當用戶雙擊顯示的訊息時：

示例 4

使用 jQuery dblclick()事件方法，我們嘗試觸發一個操作，以便在使用者雙擊顯示的訊息時隱藏指定的元素：

<html>
    <head>
        <script type = "text/javascript" src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
      <style>
        h2{
            background-color: aqua;
            padding: 10px;
            width: 300px;
        }
      </style>
    </head>
<body>
    <h2>Double click to hide me!</h2>
    <script>
        $('h2').dblclick(function(){
            $(this).hide();
        });
    </script>
</body>
</html>

輸出

上述程式顯示一條訊息，當用戶雙擊它時，它將被隱藏：

當用戶雙擊顯示的訊息時：

jquery_ref_events.htm

列印頁面