How to trace mouse location information

Looking for a way to retrieve mouse location information continuously

I will briefly describe the background of the problem.
We are currently creating a website (HP).
I would like to get all the location information of the mouse when I draw a line (e.g., draw a picture) using the mouse on the website.
Using javascript, you can get location information when you click the mouse using the code below.

var offset_t=$(this).offset().top-$(window).scrollTop();
var offset_l=$(this).offset().left-$(window).scrollLeft();

var left = Math.round(e.clientX-offset_l);
vartop = Math.round(e.clientY-offset_t);

I don't know how to get location information for the mouse while dragging it.

I would like
instead of OnClick. I'd like to get the location information where the mouse moved while pressing "Long press" or "Ctrl".

If this is possible, I would like to ask you to teach me.
Thank you for your cooperation.

javascript php html

2022-09-30 18:06

1 Answers

When the mouse moves, the mouthmove event is issued, so you can specify a listener to add action when the mouse moves.If you want to get a location wherever the mouse is on the page, it's like document.addEventListener("mousemove", function(event){/*Here's what*/});.The variable event is an object in the MouseEvent class where you can see the element-based X coordinates in event.clientX and buttons pressed in event.buttons.
I think it's easier to understand the details because all the links are available detail.
I wrote a sample just in case:

var xval= document.getElementById("xval");
variableval= document.getElementById("yval");
varxdel= document.getElementById("xdel");
variabledel= document.getElementById("ydel");
varctrlval = document.getElementById("ctrlval");
var shftval = document.getElementById("shftval");
var bval = document.getElementById("bval");
document.addEventListener("mousemove", function(event){
  xval.innerHTML = event.clientX;
  yval.innerHTML = event.clientY;
  xdel.innerHTML = event.movementX;
  ydel.innerHTML = event.movementY;
  ctrlval.innerHTML = event.ctrlKey;
  shftval.innerHTML = event.shiftKey;
  
  bval.innerHTML="";
  if((event.buttons&1)>0) {bval.innerHTML+="left";}
  if((event.buttons&2)>0) {bval.innerHTML+="right";}
});

<p>X:<spanid="xval">/span>, Y:<spanid="yval"></span>>
<p>deltaX:<spanid="xdel"></span>, deltaY:<spanid="ydel">/span>>
<p>CTRL:<spanid="ctrlval"></span>, SHFT:<spanid="shftval"></span>>
<p>Buttons:<span id="bval"></span></p>

You can use mousedown instead of mousemove if you want to determine that the button has been pressed while it is not moving.

2022-09-30 18:06

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656