beginnersbook.com

  • Home
  • All Tutorials
    • Learn Servlet
    • Learn JSP
    • Learn JSTL
    • Learn C
    • Learn C++
    • Learn MongoDB
    • Learn XML
    • Learn Python
    • Learn Perl
    • Learn Kotlin
  • Core Java
  • OOPs
  • Collections
  • Java I/O
  • JSON
  • DBMS

jQuery dblclick() Method

By Chaitanya Singh | Filed Under: jQuery

jQuery dblclick() Method attaches a double click event handler function to an html element. This event handler function executes when a user double clicks on the attached html element.

jQuery dblclick() Method Syntax

$(selector).dblclick(function(){
    //event handler code. This code will execute
    // when a user double clicks on the selected html element.
});

Here $(selector) is a jQuery selector that selects an html element and the dbclick() method attaches that selected element to the event handler function.

jQuery dblclick() Example

In the following example we have attached the double click event handler function to the jQuery selector that selects h2, p and button elements, which means whenever a user double clicks on any of these elements, they will be hidden because in event handler function we are calling hide() method like this: $(this).hide(); that hides the current element.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("h2, p, button").dblclick(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<h2>jQuery double click event example</h2>
<p>This example is published on beginnersbook.com. When you double
click on the heading, paragraph or button, they will be hidden</p>
<button>Button</button>
</body>
</html>

Output:
Before a user double clicks on any html element:
jQuery dblclick
After a user double clicks on the h2 heading:
jQuery dblclick() method
After a user double clicks on the paragraph:
jQuery dblclick event example
After a user double clicks on the button:
Blank page with no elements.

❮ PreviousNext ❯

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()

Recently Added..

  • JSON Tutorial
  • Java Regular Expressions Tutorial
  • Java Enum Tutorial
  • Java Annotations Tutorial

Copyright © 2012 – 2021 BeginnersBook . Privacy Policy . Sitemap