JS实现鼠标靠近图片随机移动功能失效，求排查原因

核心问题点 #

• 定位属性缺失：你创建的div#im默认是static定位，CSS的left、top属性仅对relative/absolute/fixed这类非static定位的元素生效，所以你修改位置的代码实际没有生效，这是功能不触发的核心原因。
• 事件绑定不合理：当前绑定的mousemove事件会在鼠标处于元素范围内时连续触发，会导致元素高频抖动，换成mouseenter事件更符合“鼠标靠近就移动一次躲避”的预期。
• 边界值计算无更新：仅在页面初始化时计算一次最大可移动范围，窗口大小调整后边界值会失效，容易出现元素跑出可视区的问题。

修复后完整代码 #

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>躲避鼠标的图片</title>
</head>
<body>
<script>
let Left, Top, MaxLeft, MaxTop;
let image = document.createElement("img");
image.src = "https://yt3.ggpht.com/ytc/AKedOLT0j7uXO5xZs2Ovqr97bnSTb8leTEZqu9zlPyLFGg=s900-c-k-c0x00ffffff-no-rj";
image.width = "300";
image.height = "300";

let div1 = document.createElement('div');
div1.id = 'im'
// 新增：设置绝对定位，让left/top属性生效
div1.style.position = 'absolute'
div1.append(image);
document.body.append(div1);
elem = document.getElementById('im');

// 封装边界值计算逻辑，初始化和窗口resize时都调用
function calcMaxRange() {
  MaxLeft = document.documentElement.clientWidth - elem.offsetWidth;
  MaxTop = document.documentElement.clientHeight - elem.offsetHeight;
}
calcMaxRange()
window.addEventListener('resize', calcMaxRange)

// 替换为mouseenter事件，鼠标进入元素范围时仅触发一次
elem.addEventListener('mouseenter', handler);

function handler() {
  Left = Math.random() * MaxLeft;
  elem.style.left = Left + 'px';
  Top = Math.random() * MaxTop;
  elem.style.top = Top + 'px';
  console.log(Left + ' - ' + Top);
}
</script>
</body>
</html>

验证效果 #

运行修复后的代码，鼠标移动到图片上时，图片会立即随机跳转到页面其他可视位置，符合预期效果。

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