0

嗨，我正在尝试通过鼠标悬停来模拟 js 中的按钮单击。例如，我在 html 中有一个计算器组件（div 中的一组按钮）。我想要完成的是当用户将鼠标指针移到一个按钮上并在那里停留至少 3 秒时，该按钮将被“点击”，如果停留在那里，将会有另一个延迟（不一定是 3 秒，可以是 2 秒或 1 秒），它将再次被“点击”。

我已经用 click 和 keypress 事件处理程序完成了 Calculator 组件，但仍然没有鼠标悬停在输入处理程序上。

我所拥有的虽然看起来像：

  Calculator.mouseoverListener = function(e, calculatorObject){
     setTimeout(function(){
        value = $(e.target).val();
        calculatorObject.handleInput(value); 
     } , 2000); 
  }

但这就像：（1）鼠标在按钮上移动（2）无论它在按钮上悬停多长时间，它都会等待 2 秒并模拟“点击”..

我可以使用的方法有什么提示吗？

4

2 回答 2

0

我会采取将事件侦听器绑定到每个单独按钮的方法，就像这样（抱歉，未测试，因此可能有错误）：

var timeoutRef;

button.addEventListener('mouseover', function (event) {
    timeoutRef = setTimeout(function () {
        var newEvent = document.createEvent('UIEvents').initUIEvent('click',true,true,window,1);
        event.target.dispatchEvent(newEvent);
    }, 3000);
});

button.addEventListener('mouseout', function (event) {
    clearTimeout(timeoutRef);
});
于 2012-12-02T08:53:00.090 回答
0

setInterval您可以通过使用而不是..来解决您的问题setTimeout。这两个函数非常相似，但是setInterval每 X 毫秒重复执行一个操作。

的返回值setInterval很重要，因为它将允许您clearInterval稍后使用它来停止执行函数

var hoverInterval = false;

Calculator.mouseoverListener = function(e, calculatorObject){
   if(hoverInterval) {
       // interval already active
       return true;
   }

   hoverInterval = setInterval(function(){
      value = $(e.target).val();
      calculatorObject.handleInput(value); 
   } , 2000); 
}

根据您的代码，您需要为 <input> 元素鼠标移出事件添加一个侦听器，并且当该事件发生时，您清除之前的任何hoverInterval

假设你的计算器按钮有一个'calculatorButton'类，你的代码可能是这样的

$('.calculatorButton').mouseout(function() {
    if(hoverInterval) {
       clearInterval(hoverInterval);
    }
});
于 2012-12-02T08:55:37.737 回答