[Edit]

jQuery - mouse double click (dblclick) event

1 contributors

2 contributions

0 discussions

10 points

Created by:

May87

827

In this article, we would like to show you how to create the double click event using jQuery.

1. `dblclick` method example

Edit

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <button id="button">Click me double times!</button>
  <script>
​
    $(document).ready(function() {
        var button = $('#button');
      
        button.dblclick(function() {
            button.text('Button double clicked!');
        });
    });
​
  </script>
</body>
</html>

Auto running

2. `on` method with event name example

Edit

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <button id="button">Click me double times!</button>
  <script>
​
    $(document).ready(function() {
        var button = $('#button');
      
        button.on('dblclick', function() {
            button.text('Button double clicked!');
        });
    });
​
  </script>
</body>
</html>

Auto running

3. `on` method with event object example

Edit

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <button id="button">Click me double times!</button>
  <script>
​
    $(document).ready(function() {
        var button = $('#button');
      
        button.on({
            'dblclick': function() {
                button.text('Button double clicked!');
            }
        });
    });
​
  </script>
</body>
</html>