<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
/*添加高度使其出现滚动条*/
height: 1000px;
}
#box {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px;
/*添加margin-top*/
margin-top: 500px;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="js/common.js"></script>
<script>
// e.pageX e.pageY IE9+
// pageY = clientY + 页面滚动出去的距离
var box = document.getElementById('box');
box.onclick = function (e) {
e = e || window.event;
console.log(getPage(e).pageX); // 传入参数e
console.log(getPage(e).pageY);
}
// 获取鼠标在页面上的位置,兼容性处理
function getPage(e) { // 传入参数e
var pageX = e.clientX + getScroll().scrollLeft;
var pageY = e.clientY + getScroll().scrollTop;
return {
pageX: pageX,
pageY: pageY
}
}
</script>
</body>
</html>
原生js事件处理e的pageX、pageY的兼容性处理
最新推荐文章于 2023-07-05 15:40:48 发布