个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
26
4
我在 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.offsetX 或 MouseEvent.offsetY 将为您提供鼠标指针相对于目标节点填充边缘的坐标。
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 内的元素元素你得到不同的值 offsetX和 offsetY正如预期的那样。
您可以做些什么来始终获取相对于 #myP 的鼠标坐标元素是减去left和 top 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
我尝试获取相对于元素的点击位置，但事件没有 offsetX。 onClick(e) { console.log(e.offsetX) // returns undefined console.
我使用 jquery 插件 Stickyfloat 在我的网页上创建 float 侧边栏。 演示:http://jsfiddle.net/neo3000ultra/vkvvX/ 默认情况下，侧边栏出现
我正在开发一个工具，我希望在将鼠标悬停在 div 元素上时以百分比 (%) 格式显示 offsetX 和 offsetY 坐标。默认情况下，它采用像素格式。 index.html 文件:
我正在玩 HTML5 拖放并在拖动时跟踪鼠标位置。 OffsetX 和 OffsetY 工作得很好，直到你松开鼠标，偏移量在最后一次调度的拖动事件中跳转到负数 这是 html: 这是CSS: #d
我需要一个弹出 div，它将出现在我单击的 anchor 的正下方。现在，我想确定 anchor 的 onClick 事件的 x 和 y 坐标。这样做的最佳实践是什么？建议使用哪些事件属性？ 最佳答案
我在 mousedown 上获取 offsetX 时遇到问题。下面是我的代码 Click the text! The mouseDown() f
我用 javascript 编写了一些代码，允许用户在 svg 中操作圆圈。 我在下面提供了一些代码。在这里你可以移动一个圆圈。在 Chrome 和 Egde 上它都能完美运行。在 Firefox 上
我是一名优秀的程序员,十分优秀！