Có thể dừng các sự kiện nhấp chuột con truyền cho cha mẹ khi được xử lý bởi .live() không?

Question

Tôi có 'Bảng sau' trên hình ảnh và nội dung của tôi ở đây: http://syndex.me Vì vậy, về cơ bản, bạn nhấp vào hình ảnh, nó sẽ phủ một bảng thông tin phía trên nội dung được nhấp.

Tôi muốn làm hai việc:

• Bấm vào nền của trang web để làm mờ dần các bảng hiện đang mở thông tin
• Có thể nhấp chuột vào một thẻ, liên kết, hoặc biểu tượng xã hội trong vòng bảng thông tin mà không kích hoạt chức năng gốc của nó, quá mờ dần.

Tôi không thể sử dụng stopPropagation cho nhấp chuột con bị thay thế bởi nhấp chuột gốc khi tôi cần các sự kiện nhấp được xử lý bởi .live() (see documentation) Điều này là do thực tế các bài đăng đang được tải động.

Tôi không thể nói điều gì đó như: $ ("# nền"). Nhấn (function() {// fade out the Info Board} Vì nó đang được bao phủ bởi toàn bộ bài đăng, và tôi có thể ' t đặt một cái nón ont sự kiện bởi vì sau đó tôi thậm chí còn sâu sắc hơn trong tình trạng khó xử của cha mẹ tham gia các sự kiện của trẻ em :-)

Cho đến nay tôi ít nhất có thể chỉ có một bảng thông tin mở (tức là tôi bấm vào một hình ảnh , sau đó khác, nó sẽ đóng một đã mở, và mở một hiện tại.Vì vậy, phần này là tất cả tốt:

$('.theContent:not(.clicked)').live("click", function() { 
      $(this).children('.postInfo').fadeIn(400); 
      $(".clicked").each(function() { 
        $(this).find('.postInfo').fadeOut(400); 
        $(this).removeClass('clicked'); 
      }); 
     $(this).addClass("clicked"); 
}); 
    $('.clicked').live("click", function() { 
      $(".clicked").each(function() { 
       $(this).find('.postInfo').fadeOut(400); 
       $(this).removeClass('clicked'); 
      }); 
}); 

Re .live(), .del eGate() và .stopPropogation():

Kể từ khi phương pháp .live() xử lý sự kiện khi họ đã tuyên truyền để phía trên cùng của tài liệu, nó không thể dừng lại tuyên truyền các sự kiện trực tiếp. Tương tự, các sự kiện được xử lý bởi .delegate() sẽ truyền đến các phần tử mà chúng được ủy nhiệm; các trình xử lý sự kiện bị ràng buộc trên bất kỳ phần tử nào bên dưới nó trong cây DOM sẽ đã được thực thi vào lúc xử lý sự kiện được ủy quyền được gọi. Do đó, các trình xử lý này có thể ngăn cản trình xử lý được ủy quyền kích hoạt bằng cách gọi event.stopPropagation() hoặc trả về false.

Answer 1

Làm thế nào về chỉ đơn giản là kiểm tra xem sự kiện này thực sự đã diễn ra trên các yếu tố cụ thể:

function activate(el) { 
    el.find('.postInfo').fadeIn(400); 
    el.addClass('clicked'); 
} 
function deactivate(el) { 
    el.find('.postInfo').fadeOut(400); 
    el.removeClass('clicked'); 
} 
$('.theContent:not(.clicked)').live('click', function(e) { 
    deactivate($('.clicked')); 
    activate($(this)); 
}); 

$('.clicked').live("click", function(e) { 
    if (! $(e.target).is('a')) { 
     // this should not trigger if a click occured on one of the links 
     deactivate($(this)); 
    } 
}); 

$('#ape').click(function(e) { 
    if ($(e.target).is('#ape')) { 
     deactivate($('.clicked')); 
    } 
}); 

Answer 2

Bạn đã nghĩ về binding sự kiện click khi bài được nạp tự động? Bằng cách này bạn có thể sử dụng stopPropagation().

http://jsfiddle.net/rkw79/CzEj5/

Answer 3

Nếu bạn liên kết các sự kiện vào một yếu tố phụ huynh, nó sẽ không dừng sự kiện tuyên truyền của mình cho nó trẻ em.

Bạn có hai giải pháp, để ràng buộc một sự kiện cho mọi trẻ em và đặt lệnh gọi dừng truyền hoặc chỉ kiểm tra ai đã kích hoạt sự kiện nhấp chuột trong phụ huynh. Tôi prsonaly tìm thấy thanh lịch hơn các giải pháp thứ hai.

Bạn có thể đọc một cái gì đó thêm về nó ở đây: http://redfishmemories.blogspot.it/2014/08/jquery-prevent-event-propagation-and.html