イベントをクリックしてドラッグ＆リサイズします。

Question

私はclick、drag、およびresizeのイベントを適用したいdivがあります。しかし、ドラッグを終了すると、クリックイベントがアクティブになります（リサイズの終了と同じです）。誰もこれを避ける方法を知っていますか？私は要素をドラッグし、両方のdragstopとclickハンドラが呼び出される終了したら

$("#foo").click(function() { 
    //click handler 
}); 

$("#foo").draggable({ 
    stop: function() {//dragstop handler} 
}); 

$("#foo").resizable({ 
    stop: function() {//resizestop handler} 
}); 

：

私のコードは次のようになります。サイズ変更とクリックで同じです。どのようにこれを避けるためのアイデア？

Answer 1

マウスボタンから指を離したときに発砲すると、これをあなたの利点として利用できます。

var doClick = true; 
$("#foo").click(function() { 

    //check if the other event handlers were used, if they were then doClick will equal false and this `if` statement will resolve to false 
    if (doClick) { 
     //run code for click event handler here 
    } else { 
     //setup the flag for next-time 
     doClick = true; 
    } 
}).draggable({ 
    stop: function() { 

     //set flag to disallow click event handler 
     doClick = false; 
    } 
}).resizable({ 
    stop: function() { 

     //set flag to disallow click event handler 
     doClick = false; 
    } 
}); 

はまた、私は$('#foo')への呼び出しを変更したことに気づく：あなたは、あなたがちょうどclickイベントハンドラのコードを実行することはできませんそれらが使用されたと述べ、他のイベントハンドラにフラグを設定し、そうであれば可能要素を3回選択する必要はありません（1回だけ）。

Answer 2

私は数日前にこの問題を抱えていましたが、ここで解決しました。しかし、もしそれが最善の方法だとは思わない。基本的には、mousedownとmouseupイベントを要素にバインドするので、mousedownにはクリックハンドラが無効になり、mouseupにはハンドラをレンダリングできます。おそらく、また、あなたが重複した匿名関数を使用することなく、それを参照できるように他の場所であなたのクリックコールバック関数を定義したい：

ここJSFiddle例です：clickイベントがあるhttp://jsfiddle.net/uQGMu/

var clickHandler = function() { 
    alert('clicked'); 
}; 

$("#foo").click(clickHandler); 

$("#foo").draggable({ 
    stop: function() { 
     alert('stopped dragging'); 
    } 
}); 

$("#foo").bind('mousedown', function() { 
    $('#foo').unbind('click', clickHandler); 
}); 

$('#foo').bind('mouseup', function() { 
    $('#foo').bind('click', clickHandler); 
});