实现按光标与元素距离调整元素大小时Y值始终为NaN如何解决？

JavaScript 鼠标事件对象的客户区坐标属性为大小写敏感的 clientX（X轴坐标）、clientY（Y轴坐标），你代码中错误拼写为全小写的 clientx、clienty，不存在的属性取值为 undefined，undefined 参与数值减法运算后返回结果就是 NaN。

修正拼写问题后，即可正确计算得到鼠标相对于目标元素左上角的Y轴坐标值，后续可基于该值实现元素尺寸的动态调整逻辑。

var elm = document.getElementById("qrcode");
elm.addEventListener("mousemove",getcordd , false)

function getcordd(ev){
  var bdns = ev.target.getBoundingClientRect();
  // 修正为大写的X、Y
  var x = ev.clientX - bdns.left;
  var y = ev.clientY - bdns.top;
  console.log(`${y}`);
}

• 注意：所有DOM API的属性、方法名都是大小写敏感的，拼写时需严格匹配标准命名规则。

内容的提问来源于stack exchange，提问作者Nicolas