JavaScript中的鼠标事件问题_Javascript_Drag And Drop_Mouseevent_Mouse

JavaScript中的鼠标事件问题

javascript

JavaScript中的鼠标事件问题,javascript,drag-and-drop,mouseevent,mouse,Javascript,Drag And Drop,Mouseevent,Mouse,我刚刚开始学习JavaScript，我正在尝试创建一个执行以下步骤的函数记录用户单击并按住的位置的x坐标（onmousedown（？），而不是onclick）然后，当鼠标仍在向下单击时，鼠标在x方向上每移动±100个单位，我希望发生一个动作（对于这个问题不重要，但例如，会出现一个弹出窗口）当用户释放鼠标（onmouseup（？）时，函数停止跟踪用户的鼠标位置，操作停止（如果如示例所示，弹出窗口将不再弹出）如果用户再次单击向下，请重复步骤1-3 这是我痛苦的尝试 <DOCTYPE!

我刚刚开始学习JavaScript，我正在尝试创建一个执行以下步骤的函数

记录用户单击并按住的位置的x坐标（onmousedown（？），而不是onclick）

然后，当鼠标仍在向下单击时，鼠标在x方向上每移动±100个单位，我希望发生一个动作（对于这个问题不重要，但例如，会出现一个弹出窗口）

当用户释放鼠标（onmouseup（？）时，函数停止跟踪用户的鼠标位置，操作停止（如果如示例所示，弹出窗口将不再弹出）

如果用户再次单击向下，请重复步骤1-3

这是我痛苦的尝试

<DOCTYPE! html>
<html >
<body onmousedown="doThing()">
<script type="text/javascript">

//global variable that tracks whether or not mouse is down or up.
var mouseDown = 0;

document.body.onmousedown = function() 
{ 
  ++mouseDown;
}
document.body.onmouseup = function() 
{
  --mouseDown;
}

//displays the state of the mouse on screen. 1 means mouse is down, 0 means mouse is up.
function track()
{
mouseState.innerHTML = mouseDown;
}

//when the mouse moves 100 units in either direction from the location of the initial downclick, a popup appears
function doThing() 
{
    var xPos = window.event.clientX;
    if (mouseDown==1 && ((Math.abs(xPos-window.event.clientX))>100))
        alert("yay");

}

</script>
<div align="center"><span id="mouseState"></span></div>
</body>
</html>


//跟踪鼠标是否向下或向上的全局变量。
var mouseDown=0；
document.body.onmousedown=函数（）
{ 
++穆斯敦；
}
document.body.onmouseup=函数（）
{
--穆斯敦；
}
//在屏幕上显示鼠标的状态。1表示鼠标下降，0表示鼠标上升。
函数跟踪（）
{
mouseState.innerHTML=mouseDown；
}
//当鼠标从初始下击位置向任意方向移动100个单位时，会出现一个弹出窗口
函数doThing（）
{
var xPos=window.event.clientX；
如果（mouseDown==1&（（Math.abs（xPos window.event.clientX））>100））
警惕（“耶”）；
}

非常感谢您对任何事情的反馈/帮助/提示

这就是我想到的：

非常感谢。这正是我所需要的，你做得很快！非常感谢！

//global variable that tracks whether or not mouse is down or up.
var mouseDown = 0;
//global variable that tracks where the mouse position when pressed
var firstPos = 0;
document.body.onmousedown = function(event) 
{ 
     mouseDown = 1;
     track();
     firstPos = window.event.clientX;
}
document.body.onmouseup = function(event) 
{
     mouseDown = 0
     track();
     firstPos = 0;
}
document.body.onmousemove = function()
{
    if (mouseDown == 1){
        doThing();
    }
}
document.body.onmouseout = function()
{
   //important because when you click the alert button `onmouseup` won't be triggered
   mouseDown = 0;
}
//displays the state of the mouse on screen. 1 means mouse is down, 0 means mouse is up.
function track()
{
   mouseState.innerHTML = mouseDown;
}

//when the mouse moves 100 units in either direction from the location of the initial downclick, a popup appears
function doThing(event) 
{
    if (mouseDown==1 && ((Math.abs(firstPos-window.event.clientX))>100))
        alert("yay");

}