关于javascrip鼠标事件的Demo

最新推荐文章于 2022-05-24 20:35:35 发布

许你壹世静好岁月

最新推荐文章于 2022-05-24 20:35:35 发布

阅读量207

点赞数

分类专栏： javascript 文章标签： javascript 大全实例教程

本文链接：https://blog.csdn.net/Yangyang___/article/details/107081306

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			 function mouse_move(obj){
			 	var msg = "当鼠标移动事件--->"+event.clientX+"——"+event.clientY;
			 	obj.innerHTML = msg;
			 	console.log(msg);
			 }
			 
			function mouse_over(obj){
				var msg = "鼠标悬停事件--->"+event.clientX+"——"+event.clientY;
			 	obj.innerHTML = msg;
			 		console.log(msg);
			}
			
			function mouse_out(obj){
				var msg = "鼠标移除事件--->"+event.clientX+"——"+event.clientY;
			 	obj.innerHTML = msg;
			 		console.log(msg);
			}
			function mouse_down(obj){
				var msg = "鼠标按下去事件--->"+event.clientX+"——"+event.clientY;
			 	obj.innerHTML = msg;
			 		console.log(msg);
			}
			
			function mouse_up(obj){
				var msg = "鼠标按下去之后松开事件--->"+event.clientX+"——"+event.clientY;
			 	obj.innerHTML = msg;
			 		console.log(msg);
			}
			function mouse_click(obj){
				var msg = "鼠标单击--->"+event.clientX+"——"+event.clientY;
			 	obj.innerHTML = msg;
			 		console.log(msg);
			}
			function mouse_dblclick(obj){
				var msg = "鼠标双击--->"+event.clientX+"——"+event.clientY;
			 	obj.innerHTML = msg;
			 		console.log(msg);
			}
		</script>
	</head>
	<body >
		<div style="width: 200px;  height: 200px; background-color: chartreuse;"         
             onmousemove="mouse_move(this)"
			 onmouseout="mouse_out(this)"
			 onmousedown="mouse_down(this)"
			 onmouseup="mouse_up(this)"
			 onclick="mouse_click(this)"
			 ondblclick="mouse_dblclick(this)"
			 onmouseover="mouse_over(this)">
		</div>
	</body>
</html>