JQuery event.stopPropagation（）not working

Question

私のhtmlでは、私はliの中に埋め込まれたdragHandleクラスのスパンを持っています。

<div class='treeView'> 
    <ul class='tree'> 
     <li><span class="dragHandle"></span>Item 1 
      <ul> 
       <li><span class="dragHandle"></span>Item 2 <a href="#">link</a></li> 
      </ul> 
     </li> 
</ul> 

次のように私はjQueryのを使用してイベントハンドラをアタッチ：

$(".tree li").click(function(event) { 
    alert("click"); 
    event.stopPropagation(); 
}); 

$(".dragHandle").mousedown(function(event) { 
    alert("down"); 
    event.stopPropagation(); 

}); 

$(".dragHandle").mouseup(function(event) { 
    alert("Up"); 
    event.stopPropagation(); 

}); 

私は警告をアップダウンを取得し、要素の上にマウスダウンとマウスアップすると、しかし、私はまた、李さんのクリックアラートを取得イベントハンドラも。 mousedownとmouseupのハンドラーでevent.stopPropagationを呼び出すことでこれを防ぐ必要があると私は考えました。 dragHandleでmousedown/upイベントのために呼び出されたクリックイベントを停止するにはどうすればよいですか？

TIA、 アダム

Answer 1

私は、クリックイベントがdragHandle上のマウスダウン/アップイベントに対して呼び出されている方法を停止していますか？

あなたは...キャプチャし、食べ... そのイベント：

$(".dragHandle").click(function(event) { event.stopPropagation(); }); 

ここで重要なのはclick、mousedown、およびmouseupが別個のイベントであるということです。 clickはmousedownで、それに続くmouseupと考えるかもしれませんが、実際にはclickイベントがマウスに関与していないユーザーアクションによってトリガーされている可能性があります。mousedownとmouseupの組み合わせは発生しません任意のclickイベント。

Answer 2

あなたは、マウスダウンとアップイベントを追跡し、簡単なwrapper-「クラス」を、作成することができます。

(function() { 
    var DragDropHandler = { 
     isDrag: false, 

     mouseDownHandler: function (event) { 
     alert("down"); 
     event.stopPropagation(); 
     this.isDrag = true; 
     }, 

     mouseUpHandler: function (event) { 
     alert("Up"); 
     event.stopPropagation(); 
     this.isDrag = false; 
     }, 

     clickHandler: function (event) { 
     event.stopPropagation(); 
     // Check if we've already received a mouseDown-event. If we have, 
     // disregard the click event since we want drag-functionality 
     if(this.isDrag) { return; } 
     alert("click"); 
     } 
    }; 

    $(".tree li").click(function(event) { 
     DragDropHandler.clickHandler.call(DragDropHandler, event); 
    }); 
    $(".dragHandle").mousedown(function(event) { 
     DragDropHandler.mouseDownHandler.call(DragDropHandler, event); 
    }); 
    $(".dragHandle").mouseup(function(event) { 
     DragDropHandler.mouseUpHandler.call(DragDropHandler, event); 
    }); 
})(); 

これは、イベントがDragDropHandlerオブジェクトに取り扱い閉鎖し、デリゲートを作成します。 このがメソッド内のDragDropHandlerオブジェクトを参照していることを確認するために、function.call（最初のパラメータはコンテキスト）を使用しています。グローバル空間からは到達できない無名関数を作成したので、ラッパーイベントハンドラー内でDragDropHandler参照を使用することは容認できると思います。