js提供了多个获取鼠标点击事件的坐标获取方法
1.相当于你点击的元素来说 （e.offsetX和e.offsetY）
就是以你点击的元素的左上角作为参考系源点获取鼠标在元素中点击的位置
<style> div{ width: 300px; height: 300px; background-color: rebeccapurple; color: wheat; margin: 300px auto; } </style> <body> <div>我的横坐标x:,我的纵坐标y:</div> </body> <script> var oDiv = document.querySelector('div') oDiv.onclick = function (e) { console.log(e.offsetX) console.log(e.offsetY) // 渲染函数 oDiv.innerHTML = '相对于我点击的这个元素来讲我的横坐标x:' + e.offsetX + ',我的纵 坐标y:' + e.offsetY } </script>
在给div添加点击事件，在点击事件中传入事件源e，e中保存着鼠标的点击坐标，我们用offsetX和offsetY就可以获取到鼠标在div中的点击坐标。
2.相对于浏览器可视窗口来说（e.clientX和e.clientY）
可视窗口是指浏览器能够看到内容的窗口，随着滚动条移动，可视窗口的位置也在随着变化，但是都是在以可视窗口的左上角的位置为参考系来获取鼠标的点击位置
oDiv.onclick = function (e) { console.log(e.clientX) console.log(e.clientY) // 渲染函数 oDiv.innerHTML = '相对于浏览器可视窗口来讲我的横坐标x:' + e.clientX + ',我的纵坐标y:' + e.clientY }
3.以页面左上角作为参考系(e.pageX 和 e.pageY)
以页面作为为参考系，与可视窗口不一样，是以整个页面的左上角作为参考系，不随滚动条改变而改变,就是一开始页面的左上角。
oDiv.onclick = function (e) { console.log(e.pageX) console.log(e.pageY) // 渲染函数 oDiv.innerHTML = '相对于页面来讲我的横坐标x:' + e.pageX + ',我的纵坐标y:' + e.pageY }
