logo标签列表

找到鼠标相对于元素的位置

javascript
389

我想使用画布(canvas)制作一个小的绘画应用程序。因此，我需要在画布上找到鼠标的位置。

3
完整解决方案：http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript/您好，我会尽力为您提供准确的翻译。以上链接是有关JavaScript中鼠标操作和绝对位置的博客文章。 - edA-qa mort-ora-y
30个回答
1
在canvas内获取鼠标坐标可以通过event.offsetX和event.offsetY实现。以下是一个小片段来证明我的观点： 

c=document.getElementById("c");
ctx=c.getContext("2d");
ctx.fillStyle="black";
ctx.fillRect(0,0,100,100);
c.addEventListener("mousemove",function(mouseEvt){
  // the mouse's coordinates on the canvas are just below
  x=mouseEvt.offsetX;
  y=mouseEvt.offsetY;
  // the following lines draw a red square around the mouse to prove it
  ctx.fillStyle="black";
  ctx.fillRect(0,0,100,100);
  ctx.fillStyle="red";
  ctx.fillRect(x-5,y-5,10,10);
});
  
body {
  background-color: blue;
}

canvas {
  position: absolute;
  top: 50px;
  left: 100px;
}
<canvas id="c" width="100" height="100"></canvas>

如果另一个div覆盖在画布上，它就无法工作，就像@opsb所说的那样。 - David Peicho
1
function myFunction(e) {
    var x =  e.clientX - e.currentTarget.offsetLeft ; 
    var y = e.clientY - e.currentTarget.offsetTop ;
}

这个正常工作！

0

你可以通过以下方式获取它

var element = document.getElementById(canvasId);
element.onmousemove = function(e) {
    var xCoor = e.clientX;
    var yCoor = e.clientY;
}
这个在IE上能用吗？还是IE仍然使用window.event而不是将事件传递给侦听器的第一个参数？编辑-我猜IE直到版本9才有canvas元素，但由于像excanvas这样的东西，这仍然可能支持IE... - Dagg Nabbit
29
这将提供相对于浏览器窗口的坐标，仍然需要通过使用element.getBoundingClientRect()确定它们是否在该元素内部。 - David W. Keith
谢谢你让我知道getBoundingClientRect!!!! 我从来没有意识到有这样的东西! - Gershom Maes
@DavidW.Keith的评论应该被认为是正确答案！ - Ulrik. S
0

由于我没有找到一个解决方案，可以帮助您在父元素中添加一个例如选择的元素。

这是我所做的：

let positions = {
  x: event.pageX,
  y: event.pageY - event.currentTarget.getBoundingClientRect().top + event.currentTarget.offsetTop
}
0
可能的方法：
  • 将mousemove事件附加到myElement元素。
  • 当鼠标在该元素内移动时，会调用一个监听函数（例如handleMouseMove）。
  • 在该监听函数内，可以使用myElement.getBoundingClientRect()获取元素相对于视口的位置。
  • 然后，通过减去元素左上角坐标来计算事件对象的event.clientX和event.clientY属性，以计算鼠标相对于元素的位置。
  • 最后，可以使用鼠标相对于元素的位置（例如记录到控制台）。
0

我需要获取带有滚动条的非常宽的 div 内的光标位置。目标是将元素拖动到 div 的任何位置。

获取鼠标在深度滚动的远处位置的位置。

$('.canvas').on('mousemove', function(e){
    $(dragElement).parent().css('top', e.currentTarget.scrollTop + e.originalEvent.clientY );
    $(dragElement).parent().css('left', e.currentTarget.scrollLeft + e.originalEvent.clientX )
});
0

基于@Patrick Boos的解决方案，但修复了中间滚动条可能出现的问题。

export function getRelativeCoordinates(event: MouseEvent, referenceElement: HTMLElement) {
  const position = {
    x: event.pageX,
    y: event.pageY,
  };

  const offset = {
    left: referenceElement.offsetLeft,
    top: referenceElement.offsetTop,
  };

  let reference = referenceElement.offsetParent as HTMLElement;

  while (reference) {
    offset.left += reference.offsetLeft;
    offset.top += reference.offsetTop;
    reference = reference.offsetParent as HTMLElement;
  }

  const scrolls = {
    left: 0,
    top: 0,
  };

  reference = event.target as HTMLElement;
  while (reference) {
    scrolls.left += reference.scrollLeft;
    scrolls.top += reference.scrollTop;
    reference = reference.parentElement as HTMLElement;
  }

  return {
    x: position.x + scrolls.left - offset.left,
    y: position.y + scrolls.top - offset.top,
  };
}
0

原始答案建议将其放在iframe中。更好的解决方案是在填充设置为0px的画布上使用事件offsetX和offsetY。

<html>
<body>
<script>

var main=document.createElement('canvas');
main.width="200";
main.height="300";
main.style="padding:0px;margin:30px;border:thick dashed red";
document.body.appendChild(main);

// adding event listener

main.addEventListener('mousemove',function(e){
    var ctx=e.target.getContext('2d');
    var c=Math.floor(Math.random()*0xFFFFFF);
    c=c.toString(16); for(;c.length<6;) c='0'+c;
    ctx.strokeStyle='#'+c;
    ctx.beginPath();
    ctx.arc(e.offsetX,e.offsetY,3,0,2*Math.PI);
    ctx.stroke();
    e.target.title=e.offsetX+' '+e.offsetY;
    });

// it worked! move mouse over window

</script>
</body>
</html>
0
你需要了解你的网页结构，因为如果你的画布是一个 div 的子元素，而这个 div 是另一个 div 的子元素... 那么情况就会变得更加复杂。以下是我针对一个位于两层 div 内的画布的代码：
canvas.addEventListener("click", function(event) {
var x = event.pageX - (this.offsetLeft + this.parentElement.offsetLeft);
var y = event.pageY - (this.offsetTop + this.parentElement.offsetTop);
console.log("relative x=" + x, "relative y" + y);

});

-1

这是我得到的。

    $(".some-class").click(function(e) {

    var posx = 0;
    var posy = 0;

    posx = e.pageX;
    posy = e.pageY;

    alert(posx);
    alert(posy);
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接