0

こんにちは、マウス ホバーで js のボタン クリックをシミュレートしようとしています。たとえば、html に電卓コンポーネント (div 内のボタンのセット) があります。私が達成しようとしているのは、ユーザーがマウス ポインターをボタンの上に移動し、そこに少なくとも 3 秒間留まると、ボタンが「クリック」され、そこにとどまると別の遅延が発生することです (必ずしも 3 秒とは限りません)。 2秒または1秒）、再び「クリック」されます。

電卓コンポーネントは、クリックとキープレスのイベント ハンドラーで完成させましたが、マウス オーバー入力ハンドラーはまだありません。

私がそのために持っているものは次のようになります:

  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 に答える