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（）将不会按预期进行拯救。

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

Answer 1

当然仍然会调用action（）。您实际上没有取消setTimeout()功能。我怀疑可能在您的真实代码中，您有一个范围问题，并且可能没有测试您认为自己的done变量的相同版本。

比使用down标志更好的方法是跟踪setTimeout()的返回值并实际取消cancel()函数中的计时器。然后，action()永远不会在你不想要的时候开火。我认为当你使用mouseout来取消定时器触发的任何机会时，技术上也是一种更正确的行为。

此外，没有这样的事情：

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

取消cancel（）函数中的超时，使用

var mytimer = null;

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

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

另请注意，您首先使用down作为变量，然后使用函数...调用if(!down)将始终返回false，因为down指的是函数。

Answer 4

我看到你的代码有几个问题。

首先

bool down = false;

无效的JavaScript。它应该是

var down = false;

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

正如其他人所说：一旦设置，延迟函数将在1.5秒后继续执行，除非您取消超时。但是再次没关系，因为在做任何事情之前你都要检查鼠标按钮是否熄灭。

所以我要说将布尔变量重命名为isMouseDown或其他东西，然后重试。

Javascript使用setTimeout单击并按住元素

4 个答案: