gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 21:57:35 26 4
gpt4 key购买 nike

我在 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 区域上时,我得到了我想要的正确结果,但是当我的鼠标在段落区域上时,它给了我错误的结果。我无法理解为什么会发生这种情况,因为事件属于 DIV 元素的父元素。

获取结果案例 1:当我的鼠标悬停在 DIV 元素上时 上:17px,左:61px

案例 1:当我的鼠标悬停在 DIV 元素上时 上:11px,左:9px

最佳答案

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

MouseEvent.offsetX

The MouseEvent.offsetX read-only property provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.

因此在 <p> 的情况下#myP 内的元素元素你得到不同的值 offsetXoffsetY正如预期的那样。

您可以做些什么来始终获取相对于 #myP 的鼠标坐标元素是减去lefttop getBoundingClientRect 给出的值来自 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;
}
<div id="myP">
Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph,
<p>
andsets the color of the text to red. The mouseUp() function is triggered when the mouse button is released,
</p>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quaerat dolor modi et quidem repudiandae vero, recusandae laborum quae veritatis, doloribus similique accusamus quibusdam voluptate, dolore fugiat eum. Corporis, porro.
</p>
</div>
and sets the color of the text to green.
</div>
<p id="output"></p>

关于javascript - 父元素的 mousedown 事件上的 offsetX 和 offsetY 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35360704/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com