HTML——JS—鼠标事件

最新推荐文章于 2023-01-26 23:18:48 发布

Jhinhua

最新推荐文章于 2023-01-26 23:18:48 发布

阅读量104

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104933502

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

鼠标事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				/* 绝对定位 */
				position: absolute;
				/* 初始定位值 */
				top: 0;
				left: 0;
			}
		</style>
	</head>
	<body>
		<img src="../img/cat.jpg" width="50px" />
		<script>

             /** 鼠标事件中
						* button  获取的是鼠标点击的哪个按钮
						* clientX
						* clientY --- 鼠标在文档区的坐标
						* */
            
			// 点击右键阻止菜单上下文的显示
			// document.oncontextmenu = function(e){
			// 	console.log(e.button)
				
			// 	return false
			// }
			var img_node = document.querySelector("img")
			
			// 图片跟鼠标随动
			document.onmousemove = function(e){
				// 获取鼠标在文档上移动的水平与垂直坐标
				var x = e.clientX
				var y = e.clientY
				// 给标签赋值 这种形式 鼠标是位于图片的左上角
				// img_node.style.left = x + "px"
				// img_node.style.top = y + "px"
				
				// 鼠标位于图片的中心点
				/**
				 * 鼠标无法完成了  只能动图片  把图片向上移动图片高度的一半
				 * 想做移动图片宽度的一半
				 */
				img_node.style.left = (x - img_node.offsetWidth /2) + "px"
				img_node.style.top = (y - img_node.offsetHeight / 2) + "px"
			}
			

            

            // 鼠标事件中 事件对象常用的属性
			document.onmousedown = function(e){
				/**
				 * button   0   --- 左键
				 * 			1 ---- 滚轮
				 * 			2 --- 右键
				 */
				console.log("鼠标的哪个按键被点击了？" + e.button)
				
				// 鼠标的位置相对于浏览器边缘的间隙
				console.log("鼠标距离浏览器文档区(客户区)边缘的间隙：(" + 
					e.clientX + "," + e.clientY + ")")
				
				// 鼠标的位置相对于屏幕边缘的间隙
				console.log("鼠标距离屏幕边缘的间隙：(" + 
					e.screenX + "," + e.screenY + ")")
			}

		</script>
		
	</body>
</html>