Friday, August 3, 2012

jQuery Mouse Double Click Event


The Mouse Double Click event can be handled by adding an event handler to the dblclick () event using jQuery as follows.

$("#TargetObject").dblclick (function(event) {
   // Add code here to handle the Event
});

The below example shows on how to Handle the Mouse event in a DIV


Example
Create a new HTML/ASPX page
Copy the below code.
Change the mapping of the jQuery file
 jquery-1.7.2.js to map to your local drive.
View the page in your browser to test the Mouse Event

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Mouse Events</title>
<script type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script language="javascript"
type="text/javascript">
        $(document).ready(function() {
            //
            // Double Click Event
            $("#divMouseClick").dblclick (function(event) {
                $("#spanMouseClick").text(Double Click Event');
            });
        });
    </script>            
</head>
<body>
    <form id="frmMouseEvents" runat="server">
        <table cellpadding="2" cellspacing="2" border="1">
            <tr>
                <td>Mouse Activity Area</td>
                <td>Mouse Event Fired</td>
            </tr>
            <tr valign="top">
                <td align="center">
                    <div id="divMouseClick"
                            style="width:100px;
                            height:75px;
                            background-color:#FCF4EB;
                            border:1px double #E3B999;">
                            </div>                   
                </td>
                <td align="center">
                   <span
                        id="spanMouseClick"
                        style=" font-family:Verdana;
                        font-size:12px; color:Maroon;">
                    Click to Check Click & Double Click Events
                   </span>           
                </td>
            </tr> 
        </table>
    </form>
</body>

Search Flipkart Products:
Flipkart.com

No comments: