jQuery: Sự kiện Bubbling và cách "nhấp", "live.click", "stopPropagation" và "return false" hoạt động cùng nhau

Tôi sẽ có các cặp vợ chồng ở đây. Xin hãy giúp tôijQuery: Sự kiện Bubbling và cách "nhấp", "live.click", "stopPropagation" và "return false" hoạt động cùng nhau

Đây là trường hợp cơ sở: http://jsfiddle.net/2zsLy/9/

Khi tôi bấm Click Me, cả hai hộp cảnh báo và Another Paragraph đi ra. Điều này được mong đợi từ bong bóng sự kiện nhấp chuột lên vùng chứa chính, là body. Bây giờ bắt đầu câu hỏi của tôi

1) http://jsfiddle.net/2zsLy/10/

Tại sao thêm return false để tôi live.click không chỉ dừng lại sự kiện nhấp chuột từ bong bóng lên. Từ ví dụ, bong bóng live.click bật lên và kích hoạt hộp cảnh báo. Tôi nghĩ rằng tài liệu nói rằng trả lại false sẽ ngăn chặn sự kiện trực tiếp từ bong bóng.

2) http://jsfiddle.net/2zsLy/11/

Bây giờ, tôi thay đổi sự kiện click trong body-live.click và nó giải quyết vấn đề -> sự kiện nhấp chuột không bong bóng lên (vì thế không có hộp cảnh báo được hiển thị). Tại sao live.click công việc và click thì không.

3) http://jsfiddle.net/2zsLy/13/

Tôi nghĩ rằng các tài liệu nói rõ rằng gọi event.stopPropagation() sẽ không ngừng các bọt lên từ xảy ra, tôi cũng chỉ làm. Tôi sử dụng event.stopPropagation() hy vọng rằng nó sẽ vẫn kích hoạt hộp cảnh báo của tôi, nhưng nó không. Tại sao?

LƯU Ý: để biết câu trả lời cho hai câu hỏi đầu tiên, hãy xem justkt câu trả lời. Để có câu trả lời cho câu hỏi cuối cùng, hãy xem câu trả lời Squeegy và câu trả lời của mình.

Nguồn

2011-05-03 Thang Pham

Câu trả lời cho câu hỏi của bạn có thể được tìm thấy trong tài liệu event.stopPropagation().

Liên quan đến sống (nghe tiếng 'click') so với tiếng 'click' và bọt:

Kể từ khi .live() phương pháp 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ể để ngừng truyền bá các sự kiện trực tiếp. Tương tự, các sự kiện được xử lý bởi .delegate() sẽ luôn truyền cho phần tử mà chúng được ủy nhiệm; các trình xử lý sự kiện trên bất kỳ phần tử nào bên dưới nó sẽ được thực thi trước khi trình xử lý sự kiện được ủy quyền được gọi.

Vì vậy, những gì bạn đang thấy là hành vi mong đợi. sống ('click') sẽ không ngừng sủi bọt. Điều này cũng đúng với số .delegate().

This answer mô tả rộng rãi các vấn đề về dừng propegation khi sử dụng .live. Xem thêm tài liệu .live():

Sự kiện này sẽ bong bóng cho đến khi nó đến gốc của cây, là nơi .live() liên kết các trình xử lý đặc biệt của nó theo mặc định.

Kể từ jQuery 1.4, sự kiện bubbling có thể tùy chọn dừng lại ở một yếu tố DOM "bối cảnh".

Liên quan đến stopPropagation bản thân:

Giết các bọt trên các sự kiện nhấp chuột.

Vì vậy stopPropagation() nên ngăn chặn bong bóng bất kỳ nơi nào trả về sai; sẽ, mặc dù không phải nơi nó sẽ không. Nó là preventDefault() sẽ không ngăn ngừa sủi bọt. return false; có hiệu quả stopPropagation() và ngăn chặnDefault().

Để trả lời từng ví dụ về jsfiddle.

1) http://jsfiddle.net/2zsLy/10/

return false; sẽ không ngăn cản sự kiện ràng buộc sử dụng live hoặc delegate từ bọt lên. Tài liệu hướng dẫn rõ ràng về tất cả các bong bóng, dù được thực hiện với return false; hoặc với stopPropagation(). Vì vậy, những gì xảy ra là

Bấm vào <p>
Bấm bong bóng để <body>, nơi body.click() được kích hoạt
Bấm bong bóng tài liệu gốc, nơi nó phù hợp với $(event.target).closest('p'); và do đó live('click') được gọi
Return sai xảy ra, nhưng xử lý nội dung được gọi tại bước 2

2) http://jsfiddle.net/2zsLy/11/

Trong trường hợp này sự kiện được đến cùng một chỗ (gốc tài liệu) và sự trở lại sai dừng việc tuyên truyền cho sự kiện thêm ràng buộc qua live, đó là trên cơ thể.

Bấm vào <p>
Bấm bong bóng để <body>, nhưng kể từ khi xử lý cơ thể được gắn qua sống nó không được gọi chưa
Bấm bong bóng tài liệu gốc, nơi nó phù hợp với $(event.target).closest('p'); và do đó live('click') được gọi
Trả lại false xảy ra
live('click') không được gọi trên cơ thể do lỗi trả về xảy ra.

3) http://jsfiddle.net/2zsLy/13/

stopPropagation() được sử dụng một cách rõ ràng để ngăn chặn bong bóng, mặc dù nó có những hạn chế tương tự return false; không - vì vậy nó sẽ không ngăn chặn nó trong trường hợp của một sự kiện live('click') nếu có là trình xử lý nhấp chuột bị ràng buộc qua bind.

Nguồn

2011-05-03 17:46:09 justkt

Tôi không nghĩ bạn trả lời câu hỏi của tôi chút nào. U chỉ trích dẫn tài liệu mà không có gì mà tôi không biết. Đối với mỗi scenerio, tôi bao gồm jsfiddle để chứng minh câu hỏi của tôi. Vui lòng tham khảo chúng. –

@Harry - Tôi đã chỉnh sửa câu trả lời của mình để giải quyết từng ví dụ về jsfiddle. – justkt

Cảm ơn bạn rất nhiều. Câu trả lời của bạn về '1' và' 2' giúp tôi rất nhiều. Tuy nhiên, đối với '3', không phải để nói rằng bạn sai, nhưng đây là trích dẫn từ trang web jQuery' Để ngừng xử lý thêm từ thực thi sau khi một ràng buộc bằng cách sử dụng .live(), trình xử lý phải trả về false. Gọi .stopPropagation() sẽ không thực hiện được điều này.' Từ trên, 'Squeegy' trả lời và một số nhận xét về' 3', bạn có đồng ý với câu trả lời của mình cho '3', justkt? –

Sự kiện trực tiếp LUÔN xảy ra sau sự kiện liên kết (như gọi click(fn)). Vì vậy, trả về false không có gì ở đây bởi vì $("body").click() đã xảy ra. Điều này là do sủi bọt. Nhấp chuột xảy ra trên mỗi phụ huynh của phần tử bạn đã nhấp, kích hoạt mọi sự kiện nhấp chuột. Chỉ khi nó bong bóng lên đến tài liệu gốc, nó có kích hoạt bất kỳ sự kiện trực tiếp nào không.
Trong ví dụ này, bạn có 2 sự kiện trực tiếp. Vì vậy, sự kiện sẽ xuất hiện trên tài liệu và jQuery bắt đầu chạy bất kỳ sự kiện trực tiếp nào mà nó tìm thấy phù hợp với nhấp chuột của bạn. Khi nó nhận được một số return false, nó sẽ ngừng chạy bất kỳ sự kiện trực tiếp nào khác. Và các sự kiện trực tiếp được khai báo trước tiên, hãy chạy trước tiên. Vì vậy, bạn nhận được đoạn mới, nhưng không có gì khác kể từ khi cảnh báo đã được thêm vào ngăn sự kiện trực tiếp SAU số nhấp chuột trực tiếp p.
Nó sẽ không ngừng thúc đẩy sự kiện liên kết, nhưng đối số event thực sự là đối tượng trình bao bọc sự kiện jQuery và tôi tin rằng nó biết về live. Vì vậy, nó có tác dụng tương tự như trả về false, nó ngăn cản trình xử lý nhấp chuột của tài liệu thực thi bất kỳ sự kiện trực tiếp bổ sung nào.

Nguồn

2011-05-03 17:54:12

Câu trả lời hay về '1' và' 2'. Tôi không chắc tôi hiểu câu trả lời của bạn cho '3'. Vì vậy, 'event.stopPropagation()' đã không dừng quá trình truyền, cái gì ngăn chặn sự truyền bá, Squeegy? –

Nó dừng tuyên truyền bên, không thẳng đứng. '$ ('p'). live ('click', fn)' liên kết một trình xử lý 'click' với tài liệu.Nhiều sự kiện trực tiếp từ một lần nhấp có thể xảy ra vì trình xử lý nhấp chuột đó lặp lại tất cả các sự kiện trực tiếp đã đăng ký và cố gắng khớp với bộ chọn bạn đã cung cấp cho phần tử đã bắt đầu sự kiện. Nếu có một trận đấu, nó sẽ chạy hàm của bạn. 'event.stopPropagation()' báo cho jQuery hủy bỏ vòng lặp đó sớm. Vì vậy, bạn không dừng lại sự sủi bọt của sự kiện, bạn đang dừng trình xử lý nhấp chuột của 'document' khỏi việc tìm kiếm bất kỳ phần tử bổ sung nào để' click'. –

Cảm ơn bạn rất nhiều. –

jQuery: Sự kiện Bubbling và cách "nhấp", "live.click", "stopPropagation" và "return false" hoạt động cùng nhau

Trả lời

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