Friday, August 3, 2012

jQuery Mouse Right Button Click Event


The Mouse Right Button Click Event can be handled by adding an event handler to the mousedown() event and tracking the Button which was used to cause the MouseDown, using jQuery as follows.

$("#TargetObject").mousedown(function(event) {
      if (event.which == 3) {
   // 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 Right Click Event
            $("#divMouseButton").mousedown(function(event) {
                if (event.which == 3) {
                    $("#spanMouseButton").text('Right Button Clicked');
                }
            }); 
        });
    </script>            
</head>
<body>
    <form id="frmMouseEvents" runat="server">
        <table cellpadding="2" cellspacing="2" border="1">
            <tr valign="top">
                <td align="center">
                    <div id="divMouseButton"
                            style="width:100px;
                            height:75px;
                            background-color:#FCF4EB;
                            border:1px double #E3B999;">
                            </div>                   
                </td>
                <td align="center">
                   <span
                        id="spanMouseButton"
                        style=" font-family:Verdana;
                        font-size:12px; color:Maroon;">
                        Click to Check Button Click Event
                   </span>           
                </td>
            </tr>      
        </table>
    </form>
</body>

Search Flipkart Products:
Flipkart.com

1 comment:

Anonymous said...

hi,

Is there any value checking for mousemove event???
eg:for right click you have checked whether its $("#divMouseButton").mousedown(function(event) {
if (event.which == 3) {
likewise anything for mousemove any help will be greatly appreciated..