JS事件类型-鼠标事件

最新推荐文章于 2023-10-18 14:03:43 发布

置顶 qq_29209481

最新推荐文章于 2023-10-18 14:03:43 发布

阅读量226

点赞数

文章标签： javascript js event mouse event

本文链接：https://blog.csdn.net/qq_29209481/article/details/79266274

版权

//感谢杨老师

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style type="text/css">
* { margin: 0; padding: 0; }
</style>
</head>
<body style="height: 2000px; background: #ccc;">
<p id="cont1"></p>
<p id="cont2"></p>
</body>
<script type="text/javascript">

var cont1 = document.getElementById("cont1");
var cont2 = document.getElementById("cont2");

//右键菜单事件
document.oncontextmenu = function (event){
return false; //阻止默认事件，注：return false虽然可以阻止默认事件，但return后面的代码将不被执行
}

//鼠标坐标位置
document.body.onmousedown = function (event){

var event = event || window.event;

var clientX = event.clientX;
var clientY = event.clientY;

cont1.innerHTML = "clientX："+ clientX +"，clientY："+ clientY +""; //相对于浏览器可视区的鼠标坐标

var screenX = event.screenX;
var screenY = event.screenY;

cont2.innerHTML = "screenX："+ screenX +"，screenY："+ screenY +""; //相对于电脑屏幕的鼠标坐标

var pageX = event.pageX;
var pageY = event.pageY;

console.log("pageX："+ pageX +"，pageY："+ pageY +""); //相对于整个页面的鼠标坐标，包含滚动条
console.log("clientX："+ clientX +"，clientY："+ clientY +"");
//滚动条没有离开第一屏时，client和page的值是一致的，一旦拖动滚动条，page获取的坐标还是基于整个页面，而client获取的坐标始终基于可视区

}

</script>
</html>

qq_29209481

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件类型-鼠标事件

//感谢杨老师鼠标事件* { margin: 0; padding: 0; }var cont1 = document.getElementById("cont1");var cont2 = document.getElementById("cont2");//右键菜单事件document.oncontextm
复制链接

扫一扫