Question

我在mousedown上获得offsetX时遇到了问题。这是我的代码

<!DOCTYPE html>
<html>
    <body>
        <div id="myP" onmousedown="mouseDown()">
            Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph,
            <p style="margin-left:50px">
             and sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released, 
            </p>
            and sets the color of the text to green.
        </div>
        <script>
            function mouseDown() {
                var left = event.offsetX;
                var top = event.offsetY;
                console.log(top+"::"+left);
            }
        </script>
    </body>
</html>

当我的mousedown在div区域时，我得到了正确的结果但是当我的鼠标在段落区域上时它给了我错误的结果。我无法理解为什么会发生这种情况，因为event是父元素，它是DIV元素。

获得结果案例1：当我的鼠标在DIV元素上时上：17px，左：61px

案例1：当我的鼠标在DIV元素上时上：11px，左：9px

Answer 1

MouseEvent.offsetX 或 MouseEvent.offsetY 将为您提供相对于目标节点填充边缘的鼠标指针的坐标。

MouseEvent.offsetX

MouseEvent.offsetX只读属性提供鼠标指针在该事件与目标节点的填充边缘之间的X坐标中的偏移量。

因此，对于<p>元素中的#myP元素，您可以按预期获得offsetX和offsetY的不同值。

总是获取相对于#myP元素的鼠标坐标，您可以做的是从{{减去left方法给出的top和getBoundingClientRect值1}}和MouseEvent.clientX属性。

这是一个例子。

MouseEvent.clientY

var myP = document.getElementById('myP'),
    output = document.getElementById('output');

function mouseDown(e) {
  var rect = e.currentTarget.getBoundingClientRect(),
      offsetX = e.clientX - rect.left,
      offsetY = e.clientY - rect.top;
  output.textContent = "Mouse-X: " + offsetX + ", Mouse-Y: " +  offsetY;
  console.log("Mouse-X: " + offsetX, "Mouse-Y: " + offsetY);
}

myP.addEventListener('mousedown', mouseDown, false);

body {
  margin: 0;
  font-family: sans-serif;
}

#myP {
  background: lawngreen;
  margin-left: 50px;
}

#myP > p {
  background: yellow;
  margin-left: 50px;
}

#myP > div > p {
  background: red;
  color: white;
  margin-left: 100px;
}

父元素的mousedown事件上的offsetX和offsetY错误

1 个答案: