html代码获取坐标

HTML代码获取坐标

var Box = document.getElementById('Box'); //获取元素
Box.addEventListener('mousemove',function (e) { //给元素绑定mousemove事件
  var x = e.clientX; //获取鼠标在视口的X坐标
  var y = e.clientY; //获取鼠标在视口的Y坐标
  var BoxX = Box.offsetLeft; //获取元素距离父元素左侧的距离
  var BoxY = Box.offsetTop; //获取元素距离父元素顶部的距离
  var posX = (x - BoxX).toFixed(2); //计算鼠标在元素内的X坐标，并保留两位小数
  var posY = (y - BoxY).toFixed(2); //计算鼠标在元素内的Y坐标，并保留两位小数
  console.log('X坐标：' + posX + '，Y坐标：' + posY); //输出结果
})

以上代码演示了如何使用HTML获取鼠标在元素内的坐标，其实原理就是计算鼠标在视口内的坐标与元素距离视口左侧和顶部的距离的差值。