1

mousedownユーザーがマウスボタンを押したときに発生mouseupし、マウスを離したときに発生し、clickもちろん2つのイベントmousedownでありmouseup.、これら3つのイベントをそれぞれマウスアップとクリックで処理する3つの異なるイベントがあります。私の質問は、3つを区別する方法です.マウスダウンにはタイマーがあるので、そのタイマーにブール値を追加してクリック内でテストすることを考えていました.

Mousedown- タイマーは特定のクラスをチェックし、対象の要素内にこれらのクラスが存在しない場合は処理を続行します

Mouseup- タイマーをクリアする

Click- モジュールを開く

ブール値を、それぞれが読み取れるか読み取れないグローバル変数にしていないか、何かが完全に欠落している可能性があります。これは私の完全なコードのクイックコードの例です:

   var isDown = false;
 ee[i].addEventListener('click',function(){
   if(isDown===false){
     openModule();
    }
  },false);

 ee[i].addEventListener('mousedown',function(){
     var timer;
     var $this = this;
     timer = setTimeout(function(){
    if($this.className == "class"){
     isDown=true;
     createActive();
     }
   },500);
 },true);

  ee[i].addEventListener('mouseup',function(){
    clearTimeout(timer);
  },false);

これは簡単な例です。一部のコーディングを見逃している可能性がありますが、上記のコードで私のドリフトを理解していただければ幸いです。3 つのイベントを区別する良い方法を知っている人はいますか?

4

2 に答える 2

1

jQueryを利用してコードを書き直しました...

var isDown = false;
var timer;

$('.class').mousedown(function(){
    isDown = false;
    timer = setTimeout(function(){
        isDown = true;
        //createActive();
            console.log('MOUSE DOWN');
    }, 500);
}).mouseup(function(){
    if(isDown === false){
        //openModule();
            console.log('CLICK');
    }else{
            console.log('MOUSE UP');
    }
    clearTimeout(timer);    
});

jQuery をページに追加するだけで、私のコードはドキュメント内の「クラス」のクラスを持つ任意の要素に自動的にアタッチされます。

createActive(); をコメントアウトしました。そして openModule(); 呼び出して、それをいじることができます (実行時に JavaScript コンソールを表示すると、実行中のスクリプトが表示されます。再生が終わったら、 console.log() のものを削除してください)。このコードはもう少し最適化できますが、一般的なアイデアが得られます。

タイマー変数をグローバルに作成する必要がありました (関数から移動しました)。

この場合 (mousedown タイム バリアを宣言する)、クリック関数は役に立たなくなるので、mouseup 関数に即席で組み込みました。

コアとなる JavaScript を理解するのは良いことですが、jQuery はあまりにも簡単で強力すぎて無視できません。

于 2013-10-26T03:24:49.663 に答える