jquery中关于鼠标事件的操作
关于jquery中关于鼠标事件的某些操作,示例如下:
1.鼠标点击添加事件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>无标题文档</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方法</h1>
<div class="stylediv">
<button class=stylebutton>点击按钮,显示...</button>
<script type="text/javascript">
$('button:eq(0)').click(function(){
alert(this);
})
</script>
</div>
</body>
</html>
浏览器中结果:
点击按钮,显示:
2.mousedown鼠标点击触发事件 :
<h1>mousedown方法</h1>
<button class=stylebutton>点击按钮,显示...</button>
<script type="text/javascript">
$('button:eq(1)').mousedown(function(e){
alert('e.which: '+e.which);
});
</script>
<div class="stylediv">
<p>点击,显示...</p>
<p>点击,显示...</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>
浏览器运行初始结果:
左键点击按钮,显示:
右键点击按钮,显示:
鼠标中间滚轮点击按钮,显示:
鼠标点击第一行文本显示:
鼠标点击第二行文本显示:
其中方法二中: <div id="test">点击触发<div> $("#test").mousedown(11111,function(e) { //this指向 div元素 //e.data => 11111 传递数据 });
3.鼠标滑过响应事件hover():
<h1>hover触发事件</h1>
<div class="stylediv">
<p>hover事件响应</p>
</div>
<script type="text/javascript">
$("p:last").hover(
function(){
$(this).css("background","green");
},
function(){
$(this).css("background","yellow");
}
);
</script>
浏览器鼠标滑过显示效果:
鼠标离开:
实现该种效果只需要在hover方法中传递2个回调函数就可以了,不需要显示的绑定2个事件
$(selector).hover(handlerIn, handlerOut)
- handlerIn(eventObject):当鼠标指针进入元素时触发执行的事件函数
- handlerOut(eventObject):当鼠标指针离开元素时触发执行的事件函数