JQuery event.stopPropagation() не работает

В моем html у меня есть класс класса dragHandle, встроенный в 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>

Я присоединяю обработчики событий с помощью 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();

});

Когда я нажимаю мышью и нажимаю над элементом, я получаю предупреждающие сообщения "вниз" и "вверх", однако я также получаю предупреждение о клике обработчика событий li. Я думал, что это должно быть предотвращено вызовом event.stopPropagation в обработчиках mousedown и mouseup. Как остановить событие click, вызываемое для событий mousedown/up на dragHandle?

ТИА, Адам

Ответ 1

Как остановить событие click, вызываемое для событий mousedown/up на dragHandle?

Вы захватываете... и едите... это событие:

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

Ключевым моментом здесь является то, что click, mousedown и mouseup - это разные события. Хотя вы можете подумать о click как о mousedown, за которым следует mouseup, на самом деле у вас могут быть события click, вызванные действиями пользователя, которые даже не связаны с мышью, а также комбинации mousedown и mouseup, которые вообще не приводят к событиям click.

Ответ 2

Вы можете создать простую оболочку - "класс", которая отслеживает события мыши и вниз:

(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. Обратите внимание, что я использовал функцию function.call(первый параметр - это контекст), чтобы гарантировать, что это относится к объекту DragDropHandler внутри его методов. Поскольку мы создали анонимную функцию, недоступную из глобального пространства, я считаю приемлемым использовать ссылку DragDropHandler внутри обработчиков событий оболочки.