Sự kiện JQuery.stopPropagation() không hoạt động

Question

Trong html của tôi, tôi có một lớp kéoHandle được nhúng trong một 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> 

tôi đính kèm xử lý sự kiện sử dụng jQuery như sau:

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

}); 

Khi tôi MouseDown và chuột lên trên yếu tố tôi nhận được xuống và lập cảnh báo, tuy nhiên tôi cũng nhận được cảnh báo nhấp chuột của li của xử lý sự kiện quá. Tôi nghĩ rằng điều này nên được ngăn chặn bởi các cuộc gọi đến event.stopPropagation trong xử lý chuột và chuột. Làm cách nào để dừng sự kiện nhấp được gọi cho các sự kiện được tổ chức/trở lên trên dragHandle?

TIA, Adam

Answer 1

Làm thế nào để ngăn chặn các sự kiện nhấp chuột được kêu gọi mousedown/lên các sự kiện trên dragHandle?

Bạn chụp ... và ăn ... rằng sự kiện:

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

Mấu chốt ở đây là click, mousedown và mouseup là những sự kiện khác nhau. Mặc dù bạn có thể nghĩ đến số click là mousedown theo sau là mouseup, thực tế bạn có thể có click sự kiện được kích hoạt bởi hành động của người dùng thậm chí không liên quan đến chuột, cũng như kết hợp của mousedown và mouseup. mọi sự kiện click.

Answer 2

Bạn có thể tạo một wrapper- "class" đơn giản, mà theo dõi chuột xuống và lên các sự kiện:

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

này tạo ra một đóng cửa và đại biểu xử lý sự kiện cho DragDropHandler đối tượng. Lưu ý rằng tôi đã sử dụng hàm.call (tham số đầu tiên là ngữ cảnh) để đảm bảo rằng này dùng để chỉ đối tượng DragDropHandler bên trong các phương thức của nó. Vì chúng ta đã tạo ra một hàm ẩn danh mà không thể đạt được từ không gian toàn cục, tôi nghĩ rằng nó có thể chấp nhận được để sử dụng tham chiếu DragDropHandler bên trong trình xử lý sự kiện trình bao bọc.