Question

您好我正在尝试使用鼠标悬停模拟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秒并模拟“点击”..

我可以使用哪种方法提示？

Answer 1

我会采用将事件监听器绑定到每个单独按钮的方法（抱歉，未经过测试，因此可能有错误）：

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);
});

Answer 2

您可以使用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); 
}

根据您的代码，您需要为＆lt; input＆gt;添加一个监听器。元素鼠标输出事件，当事件发生时，您清除以前的任何hoverInterval

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

$('.calculatorButton').mouseout(function() {
    if(hoverInterval) {
       clearInterval(hoverInterval);
    }
});

JS模拟按钮单击使用悬停x秒

2 个答案: