父元素的mousedown事件上的offsetX和offsetY错误 [英] Wrong offsetX and offsetY on mousedown event of parent element
问题描述
在mousedown获得offsetX时遇到问题。以下是我的代码
<！DOCTYPE html>
< html>
< body>
< div id =myPonmousedown =mouseDown（）>
点击文字！当鼠标按钮被按下时，触发mouseDown（）函数
< p style =margin-left：50px>
并将文本的颜色设置为红色。当鼠标按钮被释放时，mouseUp（）函数被触发，
< / p>
并将文本的颜色设置为绿色。
< / div>
< script>
函数mouseDown（）{
var left = event.offsetX;
var top = event.offsetY;
console.log（top +::+ left）;
}
< / script>
< / body>
< / html>
当我的mousedown位于div区域时，我得到了正确的结果，但它给了我错误结果当我的鼠标在段落区域。我不明白为什么会发生这种情况，因为事件是父元素是DIV元素。
获取结果
案例1：当鼠标悬停时DIV元素
top：17px，left：61px
案例1：鼠标悬停时DIV元素
top：11px，left：9px
MouseEvent.offsetX 或 MouseEvent.offsetY 会给你坐标鼠标指针相对于目标节点的填充边缘。
MouseEvent。 offsetX只读属性提供该事件与目标节点的填充边缘之间鼠标指针的X坐标中的偏移量。
因此，在 总是可以获得鼠标坐标相对于 这是一个例子。 div> I facing a problem while getting offsetX on mousedown. Here is my code below I am getting correct result which i want when my mousedown is upon the div area but it gives me wrong result when my mouse is over the paragraph area. I could not understand why this is happens because event is of parent element which is DIV element. Obtain Result
Case 1: when my mouse is over DIV Element
top: 17px, left: 61px Case 1: when my mouse is over DIV Element
top: 11px, left: 9px The MouseEvent.offsetX or MouseEvent.offsetY will give you the coordinates of the mouse pointer relative to the target nodes padding edge. 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. So in the case of the What you could do to always get the mouse coordinates relative to the Here is an example.
这篇关于父元素的mousedown事件上的offsetX和offsetY错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！< p> 元素的情况下在 #myP 元素中，您可以获得 offsetX 和 offsetY
#myP 元素的操作是减去由 getBoundingClientRect 给出的 left 和 top 方法来自 MouseEvent.clientX 和 MouseEvent.clientY 属性。
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;白颜色; margin-left：100px;} < div id = MYP >点击文字！当鼠标按钮按下此段落时，触发mouseDown（）函数，< p>将文本的颜色设置为红色。当鼠标按钮被释放时，mouseUp（）函数被触发，< / p> < DIV> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Aut quaerat dolor modi et quidem repudiandae vero，recusandae labourum quae veritatis，doloribus similique accusamus quibusdam voluptate，dolore fujiat eum。 Corporis，porro。 < / p为H. < / DIV>并将文本的颜色设置为绿色。< / div>< p id =output>< / p> <!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>
<p> element inside the #myP element you are getting different values for offsetX and offsetY as expected.#myP element is to subtract the left and top values given by getBoundingClientRect method from the MouseEvent.clientX and MouseEvent.clientY properties.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>
