web-dev-qa-db-ja.com

JavaScriptのクリックとマウスダウンの競合

clickを使用してdivを挿入し、そのdivにmousedownを使用してドラッグするという特定のシナリオがあります。 clickを親コンテナにバインドし、mousedownをdiv自体にバインドしました。しかし、divでmousedownを実行すると、親でもクリックが発生するため、すでに追加されているdivをドラッグする代わりに複数のdivを挿入します。

この問題を解決する方法はありますか？ clickを使用して2つのdivを追加し、それらにclickをバインドする必要があるため、mousedownをバインド解除できません。

更新：selector.on(event, handler)タイプのバインディングを使用しています。

jqueryevent-handlingmouseeventjquery-events
17
Rutwick Gangurde

この方法を試してください。 event.stopPropagationは、マウスダウン後のクリックイベントの発生を停止しません。マウスダウンイベントとクリックイベントは互いに関連していません。

var mousedownFired = false;

$("#id").on('mousedown', function(event) {
    mousedownFired = true;
    //code
});

$("#id").on('click', function(event) {
    if (mousedownFired) {
        mousedownFired = false;
        return;
    }
    //code
});

更新：

マウスイベントは次のようにトリガーされます。

  1. マウスダウン

  2. クリック

  3. マウスアップ

マウスダウンがトリガーされると、mousedownFired変数はtrueに設定されます。次に、クリックイベントでreturn（つまり、クリックイベントの処理を続行しない）し、mousedownFired変数がfalseにリセットされるため、今後のクリックイベントは通常どおり発生します。 2つのマウスダウンまたは2つのクリックイベントは考慮しません。

16
YogeshWaran

おそらく、個々の子divではなく、親コンテナーにイベントハンドラーをアタッチします。これにより、新しい子が作成されるときに、イベントハンドラーを追加する必要がありません。

例えば：

$("#parentDiv").on('click','.childDiv',function() {
    event.stopPropagation();
}).on('mousedown','.childDiv',function() {
    // your dragging code
});

.on（）関数にセレクターを提供すると、渡された関数がそのセレクターに一致する子孫に対して呼び出されます。

4
zkhr

Event.stopPropagation（）を使用できます。

例：

$("#button").mousedown(function(event){
event.stopPropagation();
// your code here
});

$("#button").click(function(event){
event.stopPropagation();
// your code here
});

このページを見てください http://api.jquery.com/event.stopPropagation/

1
aimadnet
            var timestamp = 0;
    jQuery('ul.mwDraggableSelect a',element).mousedown(function(event){
        timestamp = new Date().getTime();
    });

    jQuery('ul.mwDraggableSelect a',element).click(function(event){
        var interval = 400;//if a mousedown/mouseup is longer then interval, dont process click
        var timestamp2 = new Date().getTime();
        if((timestamp2 - timestamp)>interval){ return false; }

                    /* your code here */
            });
0
ShaunTheSheep