javascriptはonmousedown、onmouseup、onclickが同時に同じラベルノードElementに適用されます.

3164 ワード

JavaScriptでは、mousedown、mouseup、clickの実行順序は左から右に、より重要なのは一旦mousedownイベントがアクティブになると、通常の状況(mousedownイベントでバインディングされていない方法はalertのような方法を使用して、ポップアップオブジェクトボックスがイベントの伝達を阻止したため、後続の呼び出しイベントがなくなった)の後の2つのイベントも必ずアクティブになるからです.普段は一つのラベルの上で一つのclickイベントだけを結びつけていますが、実際にはclickイベントもmousedown、mouseupなどのイベントを呼び出しました.ただそれらの呼び出し周期が非常に短いだけでなく、関連関数を作成してこの二つのイベントに結び付けられていません.これらのイベントを一つのラベルに同時に登録すると仮定して、バインディングで指定された処理関数を備えています.実際の開発では、下記の問題に遭遇します.
まず簡単な例を通してテストして、私の言った問題を発見して、あなたに直感的な印象を持たせて、更に私の解決方法を見ます.

 
  
 
  
 
  <br>function mouseDownFun() 
  <br>{ 
  <br>document.getElementById('div1').innerHTML += 'mouseDown<br/>'; 
  <br>} 
  <br>function mouseUpFun() 
  <br>{ 
  <br>document.getElementById('div1').innerHTML += 'mouseUp<br/>'; 
  <br>} 
  <br>function clickFun() 
  <br>{ 
  <br>document.getElementById('div1').innerHTML += 'click<br/>'; 
  <br>} 
  <br>

今はこのような需要があると仮定します.一枚の写真でmousedownを押してドラッグし始めますが、この写真でmouseupマウスのリリースが発生したらこの写真の関連情報が表示されます.通常の状況では、mouseupバインディングの関数を実行したいと思います.mousedownバインディングの関数も実行されます.また、先に実行されます.つまり、写真情報を見る時には、写真もドラッグします.実際には、あなたが本当に望んでいるのは、その方法を実行するたびにいいかもしれません.例えば、マウスを押してもすぐに釈放されると、写真の情報を見たいのです.ドラッグしたいのではなく、画像の情報を見たいのです.逆に、マウスを押して停止したら、ドラッグしたいということを示します.この時は情報の表示方法は実行しないでください.これはどうやってできますか?上の分析によって、setTimeout関数で処理してこのような需要を実現することができます.以下は完全な例を示します.簡単です.注釈も付けられています.別に説明しません.

 
  
 
  
 
  <br>var doMouseDownTimmer = null; 
  <br>var isMouseDownDoing = false; 
  <br>function mouseDownFun() 
  <br>{ 
  <br>//  mouseDownFun       ，             
  <br>isMouseDownDoing = false; 
  <br>//  200     onmousedown       ，   200        ，  doMouseDownTimmer  ，  onmousedown     ，        doMouseDown     onmousedown         
  <br>doMouseDownTimmer = setTimeout(doMouseDown,200); 
  <br>} 
  <br>function doMouseDown() 
  <br>{ 
  <br>//  200          ， isMouseDownDoing   true，     mouseDown    ，  mouseUp       
  <br>isMouseDownDoing = true; 
  <br>document.getElementById('div1').innerHTML += 'mouseDown<br/>'; 
  <br>} 
  <br>function mouseUpFun() 
  <br>{ 
  <br>if (!isMouseDownDoing) 
  <br>{ 
  <br>clearTimeout(doMouseDownTimmer); //      ，         doMouseDownTimmer  ，  200   doMouseDown          
  <br>document.getElementById('div1').innerHTML += 'mouseUp<br/>'; 
  <br>} 
  <br>} 
  <br>

話題:普段よく使うclick事件はすべてmousewn、mouseupの後に走っているので、clickの代わりにmouseupを使ってもいいです.この時、Elementではclickイベントを登録しないでください.もちろん、できれば、clickの代わりにmousedownを直接持ってもいいです.イベントの応答はもっと速くなります.この中にGoogleのいくつかの製品の中でGmailなどという書き方が見られます.

Commons Lang