Friday, August 3, 2012

jQuery Mouse Down Event


The Mouse Down event can be handled by adding an event handler to the mousedown() event using jQuery as follows.

$("#TargetObject").mousedown (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() {
            //
            // Mouse Down Event
            $("#divMouseMove").mousedown(function(event) {
                $("#spanMouseMove").text('Mouse Down Event');
            });
        });
    </script>            
</head>
<body>
    <form id="frmMouseEvents" runat="server">
        <table cellpadding="2" cellspacing="2" border="1">
            <tr valign="top">
                <td align="center">
                    <div id="divMouseMove"
                            style="width:100px;
                            height:75px;
                            background-color:#FCF4EB;
                            border:1px double #E3B999;">
                            </div>                   
                </td>
                <td align="center">
                   <span
                        id="spanMouseMove"
                        style=" font-family:Verdana;
                        font-size:12px; color:Maroon;">
                   Hover to Check Enter & Leave Events
                   </span>           
                </td>
            </tr> 
        </table>
    </form>
</body>
</html>


Search Flipkart Products:
Flipkart.com

No comments: