❮❮ PREV NEXT ❯❯

EVENTS - dblclick()

The Double Click Event or dblclick() Event can have a function inside it. And it executes when an element is double clicked.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	<p class = "para1"> First Paragraph </p>
    	<p class = "para2"> Second Paragraph </p>
    	<p class = "para3"> Third Paragraph </p>
    	
    	<img src = "/myImage.png" alt = "Double Click me"/>

      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('img').dblclick( function() { 
            	$('p').text("All the contents of p element got replaced")
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you look at the above code, we have three <p> elements,

<p class = "para1"> First Paragraph </p>
<p class = "para2"> Second Paragraph </p>
<p class = "para3"> Third Paragraph </p>

And we have an image,

<img src = "/myImage.png" alt = "Double Click me"/>

Now, if we take a look at the JQuery statement,

$('img').dblclick( function() {
	$('p').text("All the contents of p element got replaced")
});

At first we locate the image,

$('img')

Then we use the dblclick() event,

$('img').dblclick(...)

And put the anonymous function inside dblclick() event to change the contents of <p> element.

$('img').dblclick( function() {
	$('p').text("All the contents of p element got replaced")
});

And the contents of the <p> elements gets changed.

❮❮ PREV NEXT ❯❯