我正在嘗試根據 cursor 和所述 object 之間的距離調整 object 的大小。 我得到的 Y 值總是 naN

Question

這是我的 js 代碼，由於我的 Y 變量，我總是得到一個 naN

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

function getcordd(ev){
  var bdns = ev.target.getBoundingClientRect();
  var x = ev.clientx - bdns.left;
  var y = ev.clienty - bdns.top;
  console.log (`${y}`);
}

Answer 1

我在這里被帶走了，但是讀到你想知道如何根據鼠標移動改變元素的大小，我把這個東西放在一起。 看看，如果您對此有任何疑問，請在評論中告訴我。 干杯

 var elm = document.getElementById("qrcode"); document.getElementById("mousecapture").addEventListener("mousemove", getcordd, false) function getcordd(ev) { var bdns = ev.target.getBoundingClientRect(); // console.log(bdns) var x = ev.clientX - bdns.left; var y = ev.clientY - bdns.top; // console.log(`${y}`, `${x}`, bdns.left, bdns.top); // resize the div //console.log(ev.clientX, ev.clientX/bdns.width,ev.clientY, ev.clientY/bdns.height) let min = 10, max = 200; // min width/height; elm.style.width = Math.max(min, Math.min(max, Math.round(max * Math.abs(x / bdns.width)))) + "px"; elm.style.height = Math.max(min, Math.min(max, Math.round(max * Math.abs(y / bdns.height)))) + "px"; }

 html, body, #container { width: 100%; height: 100%; background: #f0f0f0; } #qrcode { width: 50px; height: 50px; background: #f00; color: #fff; text-align: center; display: inline-block; } #mousecapture { width: 100px; height: 100px; border: 1px solid #ccc; background: #fff; float: right; }

 <div id='container'> Move the mouse in the white box <hr> <div id='mousecapture'></div> <div id='qrcode'></div> </div>