event.preventDefault vs event.stopPropagation

Question

Ai đó có thể giải thích sự khác biệt giữa event.preventDefault() và event.stopPropagation() là gì?

Tôi có bảng và bên trong bảng đó tôi có thẻ img.

Khi tôi nhấp vào thẻ img, tôi muốn xem cửa sổ bật lên.

Nhưng tôi cũng muốn để ngăn chặn sự lựa chọn của nhiều hàng, vì vậy tôi sử dụng:

$("table.items tbody tr").click(function(event) { 
     event.stopPropagation(); 
    }); 

Khi tôi sử dụng mã js, popup không xuất hiện;

Nếu tôi xóa mã js, cửa sổ bật lên sẽ hoạt động.

$(".info").live("click",function(e){ 
    //console.log('ok'); 
    e.stopPropagation(); 
    var elem = $(this); 
    var id = $(this).attr("id").replace("image_","container_"); 
    $('#'+id).toggle(100, function() { 
     if($(this).css('display') == 'block') { 
      $.ajax({ 
       url: "$url", 
       data: { document_id:elem.attr('document_id') }, 
       success: function (data) { 
        $('#'+id).html(data); 
       } 
      }); 
      } 
     }); 
}); 

Tại sao?

Answer 1

Tôi không phải là một chuyên gia về Javascript nhưng như xa như tôi biết:

stopPropagation được sử dụng để đảm bảo sự kiện này không làm bong bóng lên chuỗi. ví dụ. nhấp chuột vào thẻ <td> cũng sẽ kích hoạt các sự kiện nhấp chuột trên đó là phụ huynh <tr> và sau đó nhấp chuột vào phụ huynh <table>, v.v. stopPropagation ngăn điều này xảy ra.

preventDefault được sử dụng để dừng hoạt động bình thường của một phần tử, ví dụ: preventDefault trong trình xử lý nhấp chuột trên liên kết sẽ ngừng liên kết được theo dõi hoặc trên nút gửi sẽ ngừng gửi biểu mẫu.

Answer 2

Event preventDefault From W3C:

Các event.preventDefault() phương pháp dừng lại hành động mặc định của một phần tử xảy ra. Ví dụ:

Ngăn chặn một nút gửi từ nộp một mẫu đơn Ngăn chặn một liên kết từ sau URL

Event stopPropagation From W3C:

Phương pháp event.stopPropagation() dừng bọt của sự kiện cho yếu tố gốc, ngăn không cho bất kỳ trình xử lý sự kiện cha mẹ nào được thực thi .

Answer 3

• stopPropagation trên một con sẽ dừng sự kiện đó xảy ra trên mẹ (toàn bộ tổ tiên)
• preventDefault trên một con sẽ dừng sự kiện trên con nhưng nó sẽ xảy ra trên đó là cha mẹ (và cả tổ tiên nữa!)

Bây giờ trong mã của bạn là cha mẹ? đó là đứa trẻ?img là con tr là cha mẹ (cũng là ông bà thành thật), Vì vậy, hãy đoán xem mã stopPropagation nên ở đâu.