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>

浏览器运行初始结果：

左键点击按钮，显示：

扫描二维码关注公众号，回复： 3630161 查看本文章

右键点击按钮，显示：

鼠标中间滚轮点击按钮，显示：

鼠标点击第一行文本显示：

鼠标点击第二行文本显示：

其中方法二中：
<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)：当鼠标指针离开元素时触发执行的事件函数

jquery中关于鼠标事件的操作

猜你喜欢