jQuery provides a number of useful Event handlers to handle the Mouse Events like, Click, hover, Toggle, Move, etc
In the following example I have tried to cover all the possible Mouse Events.
In the following example I have tried to cover all the possible Mouse Events.
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
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>
src="JavaScript/jquery-1.7.2.js"></script>
<script language="javascript"
type="text/javascript">
type="text/javascript">
$(document).ready(function() {
//
// Click
Event
$("#divMouseClick").click(function(event) {
$("#spanMouseClick").text('Click Event');
});
//
// Double
Click Event
$("#divMouseClick").dblclick(function(event) {
$("#spanMouseClick").text('Double Click Event');
});
//
// Mouse
Position Event
$("#divMousePosition").mousemove(function(event) {
$("#spanMousePosition").text('Mouse Position: ' + event.pageX + ', ' + event.pageY);
});
//
// Mouse
Down Event
$("#divMouseMove").mousedown(function(event) {
$("#spanMouseMove").text('Mouse Down Event');
});
//
// Mouse
Up Event
$("#divMouseMove").mouseup(function(event) {
$("#spanMouseMove").text('Mouse Up Event');
});
//
// Mouse
Over Event
$("#divMouseMove").mouseover(function(event) {
$("#spanMouseMove").text('Mouse Over Event');
});
//
// Mouse
Enter Event
$("#divMouseMove").mouseenter(function(event) {
$("#spanMouseMove").text('Mouse Enter Event');
});
//
// Mouse
Leave Event
$("#divMouseMove").mouseleave(function(event) {
$("#spanMouseMove").text('Mouse Leave Event');
});
//
// Mouse
Toggle Event
$("#divToggle").toggle(function() {
$(this).css("background-color", "red");
$("#spanToggle").text('Active Color: Red');
}, function()
{
$(this).css("background-color", "blue");
$("#spanToggle").text('Active Color: Blue');
}, function()
{
$(this).css("background-color", "green");
$("#spanToggle").text('Active Color: Green');
});
//
// Mouse
Hover Event
$("#divMouseButton").hover(function(event) {
$("#spanMouseButton").text('Mouse Hover Event');
});
//
// Mouse
Left Button Click Event
$("#divMouseButton").mousedown(function(event) {
if
(event.which == 1) {
$("#spanMouseButton").text('Left Button Clicked');
}
});
//
// Mouse
Middle Button Click Event
$("#divMouseButton").mousedown(function(event) {
if
(event.which == 2) {
$("#spanMouseButton").text('Middle Button Clicked');
}
});
//
// 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>
<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>
<tr valign="top">
<td align="center">
<div id="divMousePosition"
style="width:100px;
height:75px;
background-color:#FCF4EB;
border:1px double #E3B999;">
</div>
</td>
<td align="center">
<span
id="spanMousePosition"
style=" font-family:Verdana;
font-size:12px; color:Maroon;">
Hover to see Mouse Position
</span>
</td>
</tr>
<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>
<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>
<tr valign="top">
<td align="center">
<div id="divToggle"
style="width:100px;
height:75px;
background-color:#FCF4EB;
border:1px double #E3B999;">
</div>
</td>
<td align="center">
<span
id="spanToggle"
style=" font-family:Verdana;
font-size:12px; color:Maroon;">
Click to see Toggle Effect
</span>
</td>
</tr>
</table>
</form>
</body>
</html>
Related Post
jQuery Mouse Events Tutorial
jQuery Mouse Toggle Event
jQuery MouseMove Event capture Mouse Position
jQuery Mouse Right Button Click Event
jQuery Mouse Middle Button Click Event
jQuery Mouse Left Button Click Event
jQuery Mouse Hover Event
jQuery Mouse Leave Event
jQuery Mouse Enter Event
jQuery Mouse Over Event
jQuery Mouse Up Event
jQuery Mouse Down Event
jQuery Mouse Double Click Event
jQuery Mouse Click Event
jQuery Mouse Events Tutorial
jQuery Mouse Toggle Event
jQuery MouseMove Event capture Mouse Position
jQuery Mouse Right Button Click Event
jQuery Mouse Middle Button Click Event
jQuery Mouse Left Button Click Event
jQuery Mouse Hover Event
jQuery Mouse Leave Event
jQuery Mouse Enter Event
jQuery Mouse Over Event
jQuery Mouse Up Event
jQuery Mouse Down Event
jQuery Mouse Double Click Event
jQuery Mouse Click Event
No comments:
Post a Comment