JQuery event.stopPropagation() nie działa

Question

W moim html mam rozpiętość klasy dragHandle osadzoną w li.

<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> 

dołączyć obsługi zdarzeń przy użyciu jQuery w następujący sposób:

$(".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(); 

}); 

Kiedy mousedown i mysz się nad elementem pojawia się w dół iw górę alarmy, jednak ja również uzyskać alert kliknięciem Li także obsługa zdarzeń. Myślałem, że należy temu zapobiec przez wywołanie event.stopPropagation w mousedown i obsługi mouseup. Jak zatrzymać wywoływanie zdarzenia click dla zdarzeń mousedown/up w funkcji dragHandle?

TIA, Adam

Answer 1

Jak zatrzymać zdarzenie click jest o nazwie dla mousedown/UP wydarzeń na dragHandle?

uchwycić ... i jeść ... że wydarzenie:

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

Kluczem tutaj jest to, że click, mousedown, a mouseup są różne imprezy. Chociaż możesz myśleć o click jako o mousedown, a następnie mouseup, w rzeczywistości możesz mieć zdarzenia click wyzwalane przez akcje użytkownika, które nie angażują nawet myszy, jak również kombinacje mousedown i mouseup, które nie skutkują dowolne zdarzenie click.

Answer 2

Można by stworzyć prosty wrapper- „klasa”, który śledzi myszą w dół iw górę zdarzeń:

(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); 
    }); 
})(); 

Stwarza to zamknięcie i powierza obsługę do DragDropHandler-obiekt zdarzenia. Zauważ, że użyłem function.call (pierwszym parametrem jest kontekst), aby upewnić się, że to odnosi się do obiektu DragDropHandler wewnątrz swoich metod. Ponieważ stworzyliśmy anonimową funkcję, do której nie można dotrzeć z przestrzeni globalnej, myślę, że dopuszczalne jest używanie odwołania DragDropHandler wewnątrz procedur obsługi zdarzeń opakowania.