1.相对于你点击的元素来说
语法:事件对象.offsetX 和 事件对象.offsetY
点击的位置以被点击的元素作为参考系
2.相对于浏览器的可视窗口区域来说
语法:事件对象.clientX 和 事件对象.clientY
点击的位置以窗口可视区域为参考系
3.相对于页面来说
语法:事件对象.pageX 和 事件对象.pageY
点击的位置以页面为参考系
运行代码自行理解:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div {
width: 300px;
height: 300px;
background-color: rebeccapurple;
color: wheat;
margin: 700px auto;
}
</style>
<body>
<div>我的横坐标x:,我的纵坐标y:</div>
<script>
// 点击事件光标坐标点的获取
// == 事件对象中有点击的时候 鼠标的坐标
// == 坐标取决于你用哪个坐标系
// 1 相对于你点击的元素来说
// 语法:事件对象.offsetX 和 事件对象.offsetY
// == 是点击的位置以被点击的元素作为参考系
// 2 相对于浏览器的可视窗口区域来说
// 语法:事件对象.clientX 和 事件对象.clientY
// == 是点击的位置以窗口可视区域为参考系
// 3 相对于页面来说
// 语法:事件对象.pageX 和 事件对象.pageX
// == 是点击的位置以页面的为参考系
var oDiv = document.querySelector('div')
//1 相对于你点击的元素来说
oDiv.onclick = function (e) {
console.log(e.offsetX)
console.log(e.offsetY)
// 渲染函数
oDiv.innerHTML = '相对于我点击的这个元素来讲我的横坐标x:' + e.offsetX + ',我的纵坐标y:' + e.offsetY
}
// 2 相对于浏览器的可视窗口区域来说
// oDiv.onclick = function (e) {
// console.log(e.clientX)
// console.log(e.clientY)
// // 渲染函数
// oDiv.innerHTML = '相对于浏览器可视窗口来讲我的横坐标x:' + e.clientX + ',我的纵坐标y:' + e.clientY
// }
// 3 相对于页面来说
// oDiv.onclick = function (e) {
// console.log(e.pageX)
// console.log(e.pageY)
// // 渲染函数
// oDiv.innerHTML = '相对于页面来讲我的横坐标x:' + e.pageX + ',我的纵坐标y:' + e.pageY
// }
</script>
</body>
</html>