Some operations about mouse events in jquery are as follows:
1. Click to add the event click():
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<title>Untitled Document</title>
<style>
.stylediv{
background-color:yellow;
border:solid 2px purple;
height:200px;
width:200px;
}
.stylebutton{
background-color:pink;
border:solid 5px black;
height:30px;
width:150px;
font-size:15px;
font-family:Tahoma, Geneva, sans-serif;
}
</style>
</head>
<body>
<h1>click Method</h1>
<div class="stylediv">
<button class=stylebutton>Click the button to display...</button>
<script type="text/javascript">
$('button:eq(0)').click(function(){
alert(this);
})
</script>
</div>
</body>
</html>Results in browser:
Click the button to display:
2.mousedown mouse click trigger event:
<h1>mousedown Method</h1>
<button class=stylebutton>Click the button to display...</button>
<script type="text/javascript">
$('button:eq(1)').mousedown(function(e){
alert('e.which: '+e.which);
});
</script>
<div class="stylediv">
<p>Click to display...</p>
<p>Click to display...</p>
</div>
<script type="text/javascript">
$('p:first').mousedown(function(e){
alert(e.target.textContent)
})
function data(e){
alert(e.data);
}
function a(){
$("p:last").mousedown(1111, data)
}
a();
</script>Browser run initial results:
Left click the button to display:
Right click the button to display:
Click the middle wheel of the mouse to display:
Click the first line of text to display:
Click the second line of text to display:
Method 2:
< div id = "test" > Click to trigger < div >
$("#test").mousedown(11111,function(e) {
//this points to div element
//e. Data = > 11111 transfer data
});
3. Mouse over response event hover():
<h1>hover Trigger event</h1>
<div class="stylediv">
<p>hover Event response</p>
</div>
<script type="text/javascript">
$("p:last").hover(
function(){
$(this).css("background","green");
},
function(){
$(this).css("background","yellow");
}
);
</script>Browser mouse over display effect:
Mouse away:
To achieve this effect, only two callback functions need to be passed in the hover method, and no two events need to be bound
$(selector).hover(handlerIn, handlerOut)
- handlerIn(eventObject): the event function that triggers execution when the mouse pointer enters the element
- handlerOut(eventObject): the event function that triggers execution when the mouse pointer leaves the element