Javascript 使用 setTimeout 单击并按住元素

Question

我需要在我的网络应用程序中提供一些功能，当用户单击并按住某个元素时，会发生特定的操作。可以将其想象为 Android 上的长按。

我有我的 div:

<div id="myDiv"
  onmousedown="press()"
  onmouseup="cancel()"
  onmouseout="cancel()"
  onmousemove="cancel()">Long Click Me</div>

和我的 javascript:

var down = false;

function press()
{
  down = true;
  setTimeout(function() { action(); }, 1500);
}

function cancel()
{
  down = false; // this doesn't happen when user moves off div while holding mouse down!
}

function action()
{
  if (!down)
    return; // if the flag is FALSE then do nothing.

  alert("Success!");
  down = false;
}

只要我所做的就是按住该元素，它就可以工作。我有 onmouseout 和 onmousemove 事件来调用 cancel()，因为我希望用户可以选择改变主意并在 action() 之前将鼠标从元素上移开开始。

不幸的是，我的代码似乎没有这样做。 事实上，如果用户单击了一会儿，将鼠标从 div 上移开并在 1.5 秒之前释放，那么 action() 将不会按预期退出。

编辑：感谢大家的意见，但事实证明我只是有点特殊并且没有看到我在 onmouseout 中忘记了 HTML 中的大写字母。我上面给出的示例代码应该完全按照预期工作。

Answer 1

当然，action() 仍然被调用。您实际上并没有取消 setTimeout() 函数。我怀疑也许在您的真实代码中，您存在范围问题，并且可能没有测试您认为的相同版本的 done 变量。

比使用 down 标志更好的方法是跟踪 setTimeout() 的返回值，并在 cancel() 中实际取消计时器。代码>函数。然后，当您不希望时 action() 永远不会触发。我认为，当您将鼠标移出以取消计时器触发的任何机会时，这在技术上也是更正确的行为。

不存在这样的东西：

bool down = false;

另外， JavaScript 中 它必须是：

var down = false;

我会推荐这段代码：

var downTimer = null;

function down()
{
  cancel();
  downTimer = setTimeout(function() { action(); }, 1500);
}

function cancel()
{
  if (downTimer) 
  {
    clearTimeout(downTimer);
    downTimer = null;
  }
}

function action()
{
  downTimer = null;
  alert("Success!");
}

Answer 2

您还需要清除取消函数中的超时 - 否则它仍然会触发 - 正如您在向下函数中启动它一样。

所以..

bool down = false;
//your timeout var
var t;

function down()
{
  down = true;
  t = setTimeout(function() { action(); }, 1500);
}

function cancel()
{
  down = false;
clearTimeout(t);
}

function action()
{
  if (!down)
    return;

  alert("Success!");
  down = false;
}

Answer 3

据我所知，您的代码有几个问题。

首先

bool down = false;

是无效的 JavaScript。应该是

var down = false;

然后你有两个名为 down 的变量：布尔值和函数。该函数将覆盖该变量，直到您执行将 down 设置为 true 或 false 的语句之一。

正如其他人所说：一旦设置，延迟函数将在1.5秒后继续执行，除非您取消超时。但话又说回来，这并不重要，因为您在执行任何操作之前都会检查鼠标按钮是否按下。

所以我建议将布尔变量重命名为 isMouseDown 或其他名称，然后重试。

Answer 4

要取消 cancel() 函数中的超时，

var mytimer = null;

function ondown(){mytimer = setTimeOut('action()', 1500;)}   

function cancel(){clearTimeout(mytimer);}
function action(){mytimer=null; alert('success!');}

还请注意，您首先使用 down 作为变量 end，然后作为函数...调用 if(!down)总是返回 false，因为 down 引用了一个函数。