Các sự kiện Jquery .bind được kích hoạt khi chụp sự kiện hoặc bong bóng sự kiện

Tất cả, tôi biết trong mô hình sự kiện Dom cấp 2, có tồn tại sự kiện chụp và bong bóng sự kiện. nhưng tôi không thể tìm ra cách đối phó với họ. Vì vậy, tôi đã thực hiện một số thử nghiệm với phương pháp .bind. đây là mã của tôi. Vui lòng xem lại.Các sự kiện Jquery .bind được kích hoạt khi chụp sự kiện hoặc bong bóng sự kiện

<script> 
    $(function() { 
     $('*').each(function(){ 
      var current = this; 
      $(this).bind("dblclick",function(event){console.log('Capture for ' + current.tagName + '#'+ current.id + 
        ' target is ' + event.target.id);}); 

     }); 
    }); 
</script> 
<body id="greatgrandpa"> 
    <div id="grandpa"> 
     <div id="pops"> 
      <img id="example" src="designer/templates/thumbnails/2ColsTemplate.PNG" /> 
     </div> 
    </div> 
</body>

đầu ra trông giống như dưới đây

Capture for IMG#example target is example 
Capture for DIV#pops target is example 
Capture for DIV#grandpa target is example 
Capture for BODY#greatgrandpa target is example 
Capture for HTML# target is example

Khi tôi sử dụng event.stopPropagation(); xử lý sự kiện sẽ ngừng bong bóng sự kiện dblclick.

Nhưng tôi có 2 câu hỏi cho nó. Theo thứ tự viết nhật ký, tôi đoán phương thức bind làm cho sự kiện được kích hoạt trong bong bóng sự kiện (từ dưới lên trên đỉnh mái vòm) không phải trong phần sự kiện (từ đầu đến cuối). Một câu hỏi khác là có khả năng nào làm cho sự kiện được kích hoạt trong thời gian nắm bắt sự kiện không? cảm ơn.

cảm ơn.

Nguồn

2013-03-18 Joe.wang

jQuery chỉ hỗ trợ pha sự kiện bubbling, không phải là giai đoạn bắt sự kiện, ít nhất là vì trong một thời gian dài, IE không hỗ trợ chụp. Mã của bạn hiển thị cho bạn là bubbling, không phải chụp.

Chụp bắt đầu từ document xuống phần tử đã xảy ra sự kiện; sau đó bọt bắt đầu trên nguyên tố và bong bóng lên đến document một lần nữa, đó là lý do tại sao bạn thấy các sự kiện theo thứ tự bạn đã hiển thị (đó là pha bọt).

Nguồn

2013-03-18 08:23:14

Có, Như chúng ta có thể thấy trong nhật ký. nó đang sôi sục. từ dưới lên trên. –

ok. Tôi đạt được rồi . jquery chỉ hỗ trợ sự kiện bubbling. –

[Sự kiện hỗ trợ sự kiện hỗ trợ IE9 trở lên] (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.removeEventListener#Browser_Compatibility). – Barney

Câu trả lời trước là chính xác. Tuy nhiên có một cách giải quyết đơn giản. Để có được kết quả tương tự, bạn có thể dừng tuyên truyền để kết thúc sự kiện, kích hoạt sự kiện trên cha mẹ của đích và sau đó thực thi mã mong muốn của bạn để nó xuất hiện sau các sự kiện trên đối tượng cha.

ví dụ nếu bạn muốn một cách hiệu quả đảo ngược việc thực hiện xử lý:

$('*').each(function(){ 
     var current = this; 
     $(this).bind("dblclick",function(event){ 

       // stop the event propagation 
       event.stopPropagation(); 

       // execute allow the event to be executed on parent objects 
       var parent = $(event.target).parent(); 
       if(parent) { 
        parent.dblclick(); 
       } 


       console.log('Capture for ' + current.tagName + '#'+ current.id + 
       ' target is ' + event.target.id);}); 

    });

Một nhược điểm để phương pháp này là nếu có một yếu tố phụ huynh đã được xác định để có một xử lý sự kiện chụp, chụp sẽ có đã xảy ra và gọi sự kiện trên phụ huynh sẽ khiến trình xử lý chụp được thực hiện lại. Vì vậy, điều này chỉ nên được sử dụng khi bạn nhận thức hoặc kiểm soát các sự kiện được khai báo trên tất cả các thành phần cha mẹ cho mục tiêu.

Nguồn

2014-07-25 16:34:32

Các sự kiện Jquery .bind được kích hoạt khi chụp sự kiện hoặc bong bóng sự kiện

Trả lời

Các vấn đề liên quan