Getting mousemove x location always

Question

I'm looking if it is possible, without canvas, to listen to mouse x location constantly until they leave the page. In relation to this I want to create a neat parallax design.

I'm having trouble though getting the listener to work. I am very new to javascript so I'm doing as much googling as I can to figure it out. I found this piece of code off of stackoverflow for mouse listening. I got it to work but it to detect mouse movement only once on page. I'm going to safley assume I need to remove document.removeEventListener('mousemove', myListener, false);

var myListener = function () {
document.removeEventListener('mousemove', myListener, false);

};

document.addEventListener('mousemove', myListener, false);

I also read the documentations on clientX via MouseEvent.ClientX but I'm having trouble combine both into real time. Everything I attempt I have no results.

Example for onclick, where I want on mousemove

<!DOCTYPE html> 
<html>
<head>
<title>clientX\clientY example</title>

<script>
function showCoords(evt){
  alert(
    "clientX value: " + evt.clientX + "\n" +
    "clientY value: " + evt.clientY + "\n"
  );
}
</script>
</head>

<body onmousedown="showCoords(event)">
<p>To display the mouse coordinates click anywhere on the page.</p>
</body>
</html>

Any resource or direction to lead me?

Joe Mornin · Accepted Answer · 2017-01-24T04:34:45.450

2

event.clientY and event.clientX will always return the right values. https://developer.mozilla.org/en-US/docs/DOM/event.clientY

event needs to be a MouseEvent (see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent). For instance:

function moveListener(event) {
    console.log('clientX: ' + event.clientX);
    console.log('clientY: ' + event.clientY);
}

document.addEventListener('mousemove', moveListener);

edited Jan 24 '17 at 04:34

answered Jan 24 '17 at 04:22

Joe Mornin

8,766
18
57
82

that will always monitor mouse movement on page? I see that it only works on click. I need it to work on mousemove – Robolisk Jan 24 '17 at 04:23
You can bind it to any `MouseEvent`. – Joe Mornin Jan 24 '17 at 04:27

score 0 · Answer 2 · edited May 23 '17 at 12:24

In javascript, pageX, pageY, screenX, screenY, clientX and clientY returns a number which indicates the number of physical "css pixels" a point is from the reference point. The event point is where the user clicked, the reference point is a point in the upper left. These properties return the horizontal and vertical distance from that reference point. Find more about this here.

Here's a code to get coordinates in reference to Screen and Client

document.addEventListener('mousemove', showCoords);
function showCoords(evt) {
  document.getElementById("x1").value=evt.clientX;
  document.getElementById("y1").value=evt.clientY;
  document.getElementById("x2").value=evt.screenX;
  document.getElementById("y2").value=evt.screenY;
}

<!DOCTYPE html>
<html>
<head>
<title>Mouse coordinates example</title>
</head>
<body>
  <form>
    <p>Within Client area: <br/>
        x: <input type="text" id="x1" size="3" />&nbsp;&nbsp;
        y: <input type="text" id="y1" size="3" />
        <br/>
        With respect to Screen: <br/>
        x: <input type="text" id="x2" size="3" />&nbsp;&nbsp;
        y: <input type="text" id="y2" size="3" />
        <br/>
    </p>
</form>
<p>To display the mouse coordinates move anywhere on the page.</p>
</body>
</html>

score 0 · Answer 3 · answered Jan 24 '17 at 04:56

try this with working example :)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>mouse coordinates</title>
<style>
html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
body {
    background-color: rgba(100,100,100,0.2);
    overflow: hidden;
}

#wrapper {
    width: 100%;
    min-height: 100%;
    margin: 0 auto;
    position: relative;
}
</style>
</head>

<body>
<div id="wrapper" onmousemove="coords(event)" onmouseout="clear_coords()">
    <p id="disp"></p>
</div><!--/#wrapper-->
<script>
    function coords(test) {
        //coordinates of mouse pointer relative to window size in pixels
        var x = test.clientX;
        var y = test.clientY;

        document.getElementById("disp").innerHTML = "Coordinates relative to viewport<br>X coords: " + x + "<br>Y coords: " + y;

    }

    function clear_coords() {
        var win_width = document.getElementById("wrapper").offsetWidth;
        var win_height = document.getElementById("wrapper").offsetHeight;
        document.getElementById("disp").innerHTML = "X coords: 0<br>Y coords: 0";
    }

</script>

https://jsfiddle.net/q01jygfp/

Getting mousemove x location always

3 Answers3