要素にonclickとondblclickの両方を使用するにはどうすればよいですか？

Question

私はonclickとondblclickイベントハンドラを添付する必要がある要素をページ上に持っています。クリックが1回発生すると、ダブルクリックとは異なる処理が行われます。私がこの仕事を始めようとしたとき、私の頭が回転し始めました。明らかに、ダブルクリックするとonclickは常に起動します。だから私は...このよう

window.onload = function() { 
    var timer; 
    var el = document.getElementById('testButton'); 

    el.onclick = function() { 
    timer = setTimeout(function() { alert('Single'); }, 150);   
    } 

    el.ondblclick = function() { 
    clearTimeout(timer); 
    alert('Double'); 
    } 
} 

をタイムアウトベースの構造を使用してみましたしかし、私は（IE8を使用して）矛盾した結果を得ました。それは時間の適切な多くを正常に動作しますが、時には私は "シングル"アラートを2回得るでしょう。

これまで誰もこれをしていませんか？より効果的な方法がありますか？

Answer 1

マットと同じように、私ははるかに良い経験をしました私はタイムアウト値をわずかに増加させた。クリックがすでに設定されている場合、

​​

この方法：また、（私はとにかく高いタイマーで再現することができませんでしたこれ）を2回シングルクリック発火の問題を軽減するために、私はシングルクリックハンドラにラインを追加しました重複した「単一の」アラートを避けるために、それ自体はクリアされます。

Answer 2

2つのアラートが表示されている場合は、ダブルクリックを検出するためのしきい値が小さすぎるように見えます。 150〜300msを増やしてみてください。

また、クリックとdblclickが実行される順序が保証されているかどうかはわかりません。したがって、あなたのdblclickが起動されると、最初のクリックイベントがクリアされますが、2回目のクリックイベントよりも前に発生した場合、この2番目のイベントは引き続き発生し、クリックイベントの発射とシングルクリックイベントの発射が含まれます。

1）実際にダブルクリックしてイベントを発射するための別のタイムアウトを設定します。

私はこの潜在的な問題には2つの可能な解決策を参照してください。ダブルクリックイベントが起きようとしていることをコードに記録します。次に、2回目のシングルクリックイベントが発生すると、この状態を確認して「いいえ、何もしません」というメッセージが表示されます。

2）2番目の方法は、ターゲット関数をスワップすることですクリックイベントに基づいてこれは次のようになります。

window.onload = function() { 
    var timer; 
    var el = document.getElementById('testButton'); 

    var firing = false; 
    var singleClick = function(){ 
    alert('Single'); 
    }; 

    var doubleClick = function(){ 
    alert('Double'); 
    }; 

    var firingFunc = singleClick; 

    el.onclick = function() { 
    // Detect the 2nd single click event, so we can stop it 
    if(firing) 
     return; 

    firing = true; 
    timer = setTimeout(function() { 
     firingFunc(); 

     // Always revert back to singleClick firing function 
     firingFunc = singleClick; 
     firing = false; 
    }, 150); 

    } 

    el.ondblclick = function() { 
    firingFunc = doubleClick; 
    // Now, when the original timeout of your single click finishes, 
    // firingFunc will be pointing to your doubleClick handler   
    } 
} 

基本的には、設定した元のタイムアウトをそのままにしておきます。それは常にfiringFunc（）を呼び出します。変更されるのは、firingFunc（）が実際に指しているものだけです。ダブルクリックが検出されると、doubleClickに設定されます。タイムアウトが終了すると、常にsingleClickに戻ります。

また、「発砲」変数があり、2回目のシングルクリックイベントを傍受することがわかっています。

別の選択肢は完全にDBLCLICKイベントを無視し、ただ一つのクリックやタイマーでそれを検出することである。

window.onload = function() { 
    var timer; 
    var el = document.getElementById('testButton'); 

    var firing = false; 
    var singleClick = function(){ 
    alert('Single'); 
    }; 

    var doubleClick = function(){ 
    alert('Double'); 
    }; 

    var firingFunc = singleClick; 

    el.onclick = function() { 
    // Detect the 2nd single click event, so we can set it to doubleClick 
    if(firing){ 
     firingFunc = doubleClick; 
     return; 
    } 

    firing = true; 
    timer = setTimeout(function() { 
     firingFunc(); 

     // Always revert back to singleClick firing function 
     firingFunc = singleClick; 
     firing = false; 
    }, 150); 

    } 
} 

これは未テストです:)

Answer 3

シンプル：

obj.onclick=function(e){ 
    if(obj.timerID){ 
      clearTimeout(obj.timerID); 
      obj.timerID=null; 
      console.log("double") 
     } 
     else{ 
      obj.timerID=setTimeout(function(){ 
              obj.timerID=null; 
              console.log("single") 
              },250)} 
}//onclick 

Answer 4

小修正

 if(typeof dbtimer != "undefined"){ 
      dbclearTimeout(timer); 
      timer = undefined; 
      //double click 
     }else{ 
      dbtimer = setTimeout(function() { 
      dbtimer = undefined; 
      //single click 
      }, 250); 
     } 

Answer 5

, cellclick : 
     function(){ 
      setTimeout(function(){ 
       if (this.dblclickchk) return; 
       setTimeout(function(){ 
        click event......     
       },100); 
      },500); 
     } 

, celldblclick : 
     function(){ 
      setTimeout(function(){ 
       this.dblclickchk = true; 
       setTimeout(function(){ 
              dblclick event..... 
       },100); 
       setTimeout(function(){ 
        this.dblclickchk = false; 
       },3000); 
      },1); 
     }