JQuery Mouse Double Click

From CoderLearner
Jump to: navigation, search

jQuery Mouse Double Click Event

jQuery mouse double click event handler.

Syntax

   $('#double_btn').dblclick(function(){
                    $('#mycontent').fadeOut();
     });

Example 1

<!DOCTYPE html>
<html>
   <head>
      <title>Contain</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <style>
         #mycontent{
            width:150px;
            height:150px;
            background-color:blue;
         }
         .single {
            background-color:gray !important;
         }
      </style>
      <script>
         $(document).ready(function(){
            $('#single_btn').click(function(){
               $('#mycontent').show();
               $('#mycontent').addClass("single");		
            });
            $('#double_btn').dblclick(function(){
               $('#mycontent').fadeOut();
            });
            $('#show_btn').click(function(){
               $('#mycontent').show();
               $('#mycontent').removeClass("single");
            });
                
         });
      </script>
   </head>

   <body>
      <button id="single_btn">Single</button>
      <button id="double_btn">Double</button>
      <button id="show_btn">Show</button>

      <div id="mycontent">
         Good to know everything like that!
      </div>
   </body>
</html>

Try It

  1. Single: for single click
  2. Double: for double click
  3. Show: to set its content to default value

<seo metagenerator="jquery tutorial" title="Jquery/Ajax" metakeywords="jquery greater,jquery gt, jquery lt, less then, odd jquery,jquery find element, even jquery,jquery event, jquery mouse click, jquery double click, jquery hover, jquery string, jquery array, jquery button, jquery attriubtes" metadescription="jquery button, jquery attriubte, jquery example, jquery tutorial, jquery sample"/>