同じHTML要素に複数のイベントハンドラを追加する方法と、イベントに応じて異なるメソッドを実行する方法はありますか？

私はイベントハンドラに従ってHTML要素に異なる機能を実行しようとしています。たとえば、pタグをクリックするとその背景が赤くなるはずですが、ダブルクリックすると別のことが起こるはずです。私はそれを最初にやったが、私が3回クリックすると、1回のクリックで実行される機能が実行されるような多くのバグがある。ダブルクリックの方法は問題ありません。それを修正するためのより良い解決策はありますか？私が最初にやった同じHTML要素に複数のイベントハンドラを追加する方法と、イベントに応じて異なるメソッドを実行する方法はありますか？

はこのようなものだった：

//Event 1 

var p = document.getElementById("textNode"); 


p.addEventListener('dblclick', function init() { 
    //some code 
}, false); 

// Event 2 

var element = document.getElementById("textNode"); 

element.addEventListener('click', elemEventHandler, true);

出典

2012-01-24 monk

あなたは簡単にタイムアウトを使用することにより、単一の要素にそれらをマージすることができ、このtutorial

を見てください。それは（シングル）ハンドラの火災をクリックし全くバグませんので、同じ要素にclickとdblclickイベントの両方を使用して

は

<script> 

    var click = 0; 
    var t = undefined; 

    function doclick (click) 
    { 
     if (click == 1) 
     { 
      console.log('click'); 
      $('#textNode').slideUp(); 
     } 
     else if (click == 2) 
     { 
      console.log('dblclick'); 
      $('#textNode').fadeOut(); 
     } 
     clearTimeout(t); 
     delete window.t; 
    } 

    $(document).ready(function() 
    { 

     $('#textNode').click(function() 
     { 
      clearTimeout(t); 
      delete window.t; 
      t = setTimeout('doclick(1);', 500); 
     }); 

     $('#textNode').dblclick(function() 
     { 
      clearTimeout(t); 
      delete window.t; 
      t = setTimeout('doclick(2);', 400); 
     }); 


    }); 

</script> 

<body> 
    <p id="textNode">TEST</p> 
</body>

出典

2012-01-24 08:18:16

、なぜならあなたはをクリックして、もう一度クリックする必要がありますダブルクリックするためには、少しトリッキーです。

実際に両方を使用する場合は、クリックイベントハンドラの場合はsetTimeout（数百ミリ秒）、dblclickハンドラが発生した場合はclearTimeoutにする必要があります。したがって、dblclickを確認するためにクリックイベント処理を少し遅らせることになります。

しかし全体的に、私はクリックとdblclickの両方を使用することはウェブ開発者の一般的な慣行だとは思わない。より良い選択肢について考えてみてください。

出典

2012-01-24 08:27:48 ori

同じHTML要素に複数のイベントハンドラを追加する方法と、イベントに応じて異なるメソッドを実行する方法はありますか？

答えて

関連する問題