Question

我正在寻找是否有可能在没有画布的情况下不断地听鼠标x位置直到他们离开页面。与此相关，我想创建一个整洁的视差设计。

我在让听众工作时遇到了麻烦。我是javascript的新手，所以我尽可能多地使用谷歌搜索来解决这个问题。我从stackoverflow中发现了这段代码，用于鼠标监听。我让它工作，但它只检测页面上的鼠标移动一次。我要去看看我需要删除document.removeEventListener('mousemove', myListener, false);

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

};

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

我还通过MouseEvent.ClientX阅读了关于clientX的文档，但是我很难将它们实时结合起来。我尝试的一切都没有结果。

onclick的示例，我想要在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>

带领我的任何资源或方向？

Answer 1

event.clientY和event.clientX将始终返回正确的值。 https://developer.mozilla.org/en-US/docs/DOM/event.clientY

event必须是MouseEvent（请参阅https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent）。例如：

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

document.addEventListener('mousemove', moveListener);

Answer 2

在javascript中，pageX，pageY，screenX，screenY，clientX和clientY会返回一个数字，表示物理数量“css pixels”一个点来自参考点。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。详细了解此here。

以下是获取参考Screen和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>

Answer 3

尝试使用工作示例：）

<!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/

始终使用鼠标移动x位置

3 个答案: