该方法只需要熟练通习offset 和screen 等原理即可
🍒css
<style type="text/css">
div{
width: 500px;
height: 400px;
background: red;
}
</style>
🍒样式
<div id="box"> </div>
<input style="width: 300px;" type="text" placeholder="显示时实坐标位置"/>
javas事件添加
<script type="text/javascript">
var div = document.getElementById("box");
var input = document.querySelector("input");
//鼠标在div上移动
//绑定onmousemove
div.onmousemove = function(eve){
var e = eve || event;
//获取div内部偏移量
var x = e.offsetX;
var y = e.offsetY;
//偏移量显示在input中
input.value = "x:" + x + "px,y:" + y + "px";
}
</script>