鼠标事件对象 MouseEvent

鼠标事件对象 MouseEvent_第1张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
		li{cursor: pointer;}
		</style>
</head>
<body>
	
	<script>
		document.addEventListener("click",function(e){
			// client 鼠标在可视区的x和y坐标
			console.log(e.clientX);
			console.log(e.clientY);
			console.log("-----------上面是 client---------------")
			// page 鼠标在页面文档的x和y坐标
			console.log(e.pageX);
			console.log(e.pageY);
			console.log("-------------上面是page--------------------")
			// screen 鼠标在电脑屏幕的x和y坐标
			console.log(e.screenX);
			console.log(e.screenY);
			console.log("------------------上面是screen------------------------")
		})
	</script>
</body>
</html>

你可能感兴趣的:(javascript)