Javascript 始终获取mousemove x位置_Javascript_Html

Javascript 始终获取mousemove x位置

javascript html

Javascript 始终获取mousemove x位置,javascript,html,Javascript,Html,我正在寻找是否有可能，在没有画布的情况下，不断地听鼠标x的位置，直到他们离开页面。与此相关，我想创建一个整洁的视差设计我很难让听众工作。我对javascript非常陌生，所以我正在尽可能多地用谷歌搜索来找出答案。我从stackoverflow中找到了这段代码，用于鼠标监听。我让它工作，但它检测鼠标移动只有一次在页面上。我要去safley，假设我需要删除document.removeEventListener（'mousemove'，myListener，false）我也通过via阅读了cli

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

我很难让听众工作。我对javascript非常陌生，所以我正在尽可能多地用谷歌搜索来找出答案。我从stackoverflow中找到了这段代码，用于鼠标监听。我让它工作，但它检测鼠标移动只有一次在页面上。我要去safley，假设我需要删除

document.removeEventListener（'mousemove'，myListener，false）
我也通过via阅读了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>


clientX\clientY示例
函数showCoords（evt）{
警觉的(
clientX值：“+evt.clientX+”\n+
客户端值：“+evt.clientY+”\n
);
}
要显示鼠标坐标，请单击页面上的任意位置

是否有任何资源或方向可以引导我？
event.clientY
和event.clientX
将始终返回正确的值
事件
必须是鼠标事件
（请参阅）。例如：
function moveListener(event) {
    console.log('clientX: ' + event.clientX);
    console.log('clientY: ' + event.clientY);
}

document.addEventListener('mousemove', moveListener);

在javascript中，pageX
、pageY
、screenX
、screenY
、clientX
和clientY返回一个数字，该数字指示一点距离参考点的物理“css像素”的数量。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回到该参照点的水平和垂直距离。
了解更多关于此的信息
下面是一个代码，用于获取有关屏幕
和客户端


document.addEventListener（'mousemove'，showCoords）；
函数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；
}

鼠标坐标示例
客户区内：

x:
y:


关于屏幕：

x:
y:



要显示鼠标坐标，请移动页面上的任意位置
用工作示例试试看：）

鼠标坐标
html，正文{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
}
身体{
背景色：rgba（100100,0.2）；
溢出：隐藏；
}
#包装纸{
宽度：100%；
最小高度：100%；
保证金：0自动；
位置：相对位置；
}

功能坐标（测试）{
//鼠标指针相对于窗口大小的坐标（像素）
var x=test.clientX；
var y=test.clientY；
document.getElementById（“disp”）.innerHTML=“相对于视口的坐标
X坐标：”+X+“
Y坐标：”+Y；
}
函数clear_coords（）{
var win_width=document.getElementById（“包装器”）.offsetWidth；
var win_height=document.getElementById（“包装器”）.offsetHeight；
document.getElementById（“disp”）.innerHTML=“X坐标：0
Y坐标：0”；
}



将始终监视页面上的鼠标移动？我发现它只在点击时起作用。我需要它来处理mousemove您可以将它绑定到任何MouseEvent。
function moveListener(event) {
    console.log('clientX: ' + event.clientX);
    console.log('clientY: ' + event.clientY);
}

document.addEventListener('mousemove', moveListener);

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