父Div内鼠标坐标触发子Div旋转失效问题（JavaScript）

我来帮你一步步拆解这个问题——控制台没报错的话，说明语法没问题，大概率是逻辑细节、元素选择或坐标计算这类容易忽略的点导致的。下面是几个常见的排查方向：

1. 先确认事件绑定是否完整且正确 #

你代码里写的addEventListener("mou..."看起来没写完，首先要确保事件名是完整的"mousemove"，拼写错误会直接导致事件根本没触发。比如：

test[i].addEventListener("mousemove", function(e) {
  // 这里写坐标判断和旋转逻辑
});

另外，检查getElementsByClassName("parent-div")是否真的获取到了元素：可以在循环里加一行console.log(test[i])，看看控制台有没有输出对应的div元素，如果没有，说明类名写错了或者页面里根本没有这个类的元素。

2. 鼠标坐标的计算是否正确 #

你要的是父div内的相对坐标，但如果直接用e.clientX/e.clientY，拿到的是相对于浏览器视口的坐标，不是相对于父元素的。正确的计算方式应该是：

// 在mousemove事件处理函数里
const parentRect = this.getBoundingClientRect();
const relativeX = e.clientX - parentRect.left;
const relativeY = e.clientY - parentRect.top;

然后用relativeX > 413 && relativeY > 10来判断，这样才是父div内部的坐标。

3. 子div的选择是否正确 #

你代码里没看到获取子div的逻辑，要确保在事件处理函数里能正确拿到子元素。比如如果子div的类是child-div，可以这样获取：

const childDiv = this.querySelector(".child-div");
// 或者如果是直接子元素的话
const childDiv = this.children[0];

如果子div没被正确获取，后续的旋转操作自然不会生效。

4. 旋转操作的代码是否正确 #

确认旋转的CSS属性设置没问题，正确的写法应该是：

// 比如旋转45度
childDiv.style.transform = "rotate(45deg)";
// 如果需要切换旋转状态，可以加判断：
if (relativeX > 413 && relativeY > 10) {
  childDiv.style.transform = "rotate(45deg)";
} else {
  childDiv.style.transform = "rotate(0deg)"; // 恢复原状态
}

注意不要写错属性名（比如把transform写成transforms），或者忘记加单位（比如rotate(45)而不是rotate(45deg)）。

5. 父div的尺寸和定位是否正常 #

检查父div的width是否大于413px，height是否大于10px——如果父div本身尺寸不够，鼠标根本无法进入你设定的坐标区域，自然不会触发旋转。另外，如果父div有overflow: hidden或者定位异常，也可能影响坐标判断。

最后可以在事件处理函数里打印relativeX和relativeY的值，看看实际鼠标移动时的坐标是否符合预期，这样能快速定位是坐标计算问题还是判断逻辑问题。

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