Câu hỏi event.preventDefault () so với trả về false


Khi tôi muốn ngăn các trình xử lý sự kiện khác thực hiện sau khi một sự kiện nào đó được kích hoạt, tôi có thể sử dụng một trong hai kỹ thuật. Tôi sẽ sử dụng jQuery trong các ví dụ, nhưng điều này cũng áp dụng cho plain-JS:

1. event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2. return false

$('a').click(function () {
    // custom handling here
    return false;
});

Có sự khác biệt đáng kể nào giữa hai phương pháp ngăn chặn sự kiện tuyên truyền đó không?

Cho tôi, return false; đơn giản hơn, ngắn hơn và có thể ít xảy ra lỗi hơn là thực hiện một phương thức. Với phương pháp này, bạn phải nhớ về vỏ chính xác, dấu ngoặc đơn, v.v.

Ngoài ra, tôi phải xác định tham số đầu tiên trong gọi lại để có thể gọi phương thức. Có lẽ, có một số lý do tại sao tôi nên tránh làm như thế này và sử dụng preventDefault thay thế? Cách tốt hơn là gì?


2652
2017-08-31 11:58


gốc


Lưu ý rằng jQuery preventDefault làm không phải ngăn người xử lý khác thực thi. Đó là gì stopImmediatePropagation là cho. - Crescent Fresh
@CrescentFresh, nó ngăn cản các trình xử lý khác (sau đó bị ràng buộc) thực hiện ... trên nút DOM sự kiện được kích hoạt. Nó chỉ không ngăn ngừa sự lan truyền. - eyelidlessness
Đây không phải là "hai phương pháp ngăn chặn sự kiện tuyên truyền?" e.preventDefault (); ngăn chặn các hành động mặc định, nó không ngăn chặn sự kiện tuyên truyền, được thực hiện bởi e.stopPropagation (). - Krinkle
Câu hỏi này và câu trả lời của nó là về jQuery. Nếu bạn đến đây tìm kiếm câu trả lời javascript đơn giản, hãy xem event.preventDefault () và trả về false (không có jQuery) - Oriol
preventDefault (), stopPropagation (), stopImmediatePropagation (), trả về false, tất cả 4 phương thức này được sử dụng để hủy bỏ sự kiện hoặc ngăn chặn nó khỏi sủi bọt. một số thông tin ở đây: markupjavascript.blogspot.in/2013/10/… - Mandeep Pasbola


Các câu trả lời:


return false từ trong một trình xử lý sự kiện jQuery có hiệu quả giống như gọi cả hai e.preventDefault và e.stopPropagation trên đường chuyền Đối tượng jQuery.Event.

e.preventDefault() sẽ ngăn sự kiện mặc định xảy ra, e.stopPropagation() sẽ ngăn chặn sự kiện sôi nổi và return false sẽ làm cả hai. Lưu ý rằng hành vi này khác với bình thường các trình xử lý sự kiện (không phải jQuery), trong đó đáng chú ý là return false làm không phải ngăn chặn sự kiện sôi nổi.

Nguồn: John Resig

Bất kỳ lợi ích nào khi sử dụng event.preventDefault () trên "return false" để hủy một nhấp chuột href?


2601
2017-08-31 12:05



return false từ trình xử lý DOM2 (addEventListener) không làm gì cả (không ngăn cản việc mặc định cũng không ngừng sủi bọt), từ trình xử lý Microsoft DOM2-ish (attachEvent), nó ngăn chặn mặc định nhưng không sủi bọt; từ trình xử lý DOM0 (onclick="return ..."), nó ngăn chặn mặc định (miễn là bạn bao gồm return trong thuộc tính) nhưng không sủi bọt; từ một trình xử lý sự kiện jQuery, nó thực hiện cả hai, bởi vì đó là một điều jQuery. Chi tiết và thử nghiệm trực tiếp tại đây - T.J. Crowder
Sẽ rất hữu ích khi xác định "Tuyên truyền" và "Mặc định" ở đây. Tôi cho một người tiếp tục bối rối họ. Điều này có đúng không? Lan truyền = mã của tôi (trình xử lý sự kiện JavaScript cho các phần tử cha). Mặc định = mã trình duyệt (liên kết, lựa chọn văn bản, v.v.) - Bob Stein
những gì thực sự có nghĩa là bằng cách sủi bọt? thí dụ? - Pablo Escobar
+1 để lưu ý rằng return false làm không phải dừng tuyên truyền sự kiện trong trình xử lý sự kiện không phải jQuery. I E. <a href="#" onclick="return false">Test</a> làm không phải ngăn chặn sự kiện sôi nổi. - Doug S


Theo kinh nghiệm của tôi, có ít nhất một lợi thế rõ ràng khi sử dụng event.preventDefault () trên việc sử dụng trả về false. Giả sử bạn đang nắm bắt sự kiện nhấp chuột trên thẻ neo, nếu không thì đó sẽ là vấn đề lớn nếu người dùng bị điều hướng khỏi trang hiện tại. Nếu trình xử lý nhấp chuột của bạn sử dụng trả về false để ngăn điều hướng trình duyệt, nó sẽ mở ra khả năng trình thông dịch sẽ không đạt được câu lệnh trả về và trình duyệt sẽ tiếp tục thực hiện hành vi mặc định của thẻ neo.

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

Lợi ích của việc sử dụng event.preventDefault () là bạn có thể thêm dòng này làm dòng đầu tiên trong trình xử lý, do đó đảm bảo rằng hành vi mặc định của neo sẽ không kích hoạt, bất kể dòng cuối cùng của hàm không đạt được (ví dụ: lỗi runtime ).

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

393
2018-01-22 22:37



Trong khi đúng, hành vi ngược lại thường thích hợp hơn khi thực hiện tăng cường tiến bộ (mà tôi cho rằng đó có lẽ là lý do có khả năng nhất để ghi đè hành động mặc định) - meandmycode


Đây không phải là, như bạn đã đặt tên nó, một câu hỏi "JavaScript"; nó là một câu hỏi liên quan đến thiết kế của jQuery.

jQuery và trích dẫn được liên kết trước đó từ John Resig (trong karim79's  thông điệp) dường như là nguồn hiểu lầm về cách xử lý sự kiện trong công việc chung.

Sự kiện: Trình xử lý sự kiện trả về false ngăn chặn hành động mặc định cho sự kiện đó. Nó không dừng sự kiện tuyên truyền. Xử lý sự kiện luôn luôn làm việc theo cách này, kể từ những ngày cũ của Netscape Navigator.

Các tài liệu từ MDN giải thích cách return false trong một công cụ xử lý sự kiện

Điều gì xảy ra trong jQuery không giống như những gì xảy ra với trình xử lý sự kiện. Trình lắng nghe sự kiện DOM và các sự kiện "đính kèm" của MSIE là một vấn đề hoàn toàn khác.

Để đọc thêm, hãy xem attachEvent trên MSDN và Tài liệu về sự kiện W3C DOM 2.


89
2018-06-20 21:31



Thế còn developer.mozilla.org/en/DOM/event.preventDefault ? - rds
@rds Điều đó nói rằng "preventDefault không ngừng tiếp tục tuyên truyền của sự kiện thông qua DOM event.stopPropagation nên được sử dụng cho điều đó." - Garrett
An câu trả lời trên một câu hỏi liên quan chặt chẽ cáo buộc rằng trước khi HTML 5, trả về false từ một trình xử lý sự kiện không phải là suy đoán làm bất cứ điều gì cả. Bây giờ, có lẽ đó là một cách giải thích không chính xác của thông số kỹ thuật (khó hiểu), hoặc có thể mặc dù nó không được xác định theo nghĩa đen tất cả các trình duyệt được giải thích return false giống như event.preventDefault(). Nhưng tôi không biết; đủ để khiến tôi lấy cái này bằng một chút muối. - Mark Amery
Tôi ghét cách mọi kết quả tìm kiếm javascript trong google thực sự là về jQuery, +1 - Alexander Derck


Nói chung, tùy chọn đầu tiên của bạn (preventDefault()) là một trong những việc cần làm, nhưng bạn phải biết bạn đang ở trong bối cảnh nào và mục tiêu của bạn là gì.

Nhiên liệu Mã hóa của bạn có một tuyệt vời bài viết trên return false; so với event.preventDefault() so với event.stopPropagation() so với event.stopImmediatePropagation().

CHÚ THÍCH: Các Nhiên liệu Mã hóa của bạn liên kết ở trên đã tạo ra lỗi 5xx trong một thời gian khá dài. Tôi đã tìm thấy một bản sao của nó trong Lưu trữ Internet, in ra PDF và đặt trong Dropbox: Đã lưu trữ bài viết trên return false; so với event.preventDefault() so với event.stopPropagation() so với event.stopImmediatePropagation()  (PDF)


58
2018-04-09 18:32



Liên kết tham chiếu bị hỏng, cho lỗi 502. - Visruth
@VisruthCV Xem ghi chú đã thêm của tôi với liên kết đến phiên bản lưu trữ - JAAulde


Khi sử dụng jQuery, return false đang thực hiện 3 điều riêng biệt khi bạn gọi nó:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. Dừng thực hiện gọi lại và trả về ngay lập tức khi được gọi.

Xem Sự kiện jQuery: Dừng (Mis) bằng cách sử dụng Return False để biết thêm thông tin và ví dụ.


51
2018-02-19 15:54





Bạn có thể treo rất nhiều chức năng trên onClick sự kiện cho một phần tử. Làm sao bạn có thể chắc chắn false ai sẽ là người cuối cùng bắn? preventDefault mặt khác chắc chắn sẽ chỉ ngăn chặn hành vi mặc định của phần tử.


38
2017-08-31 12:02





Tôi nghĩ

event.preventDefault()

là cách thức hủy bỏ sự kiện được chỉ định của w3c.

Bạn có thể đọc điều này trong thông số kỹ thuật của W3C Hủy sự kiện.

Ngoài ra, bạn không thể sử dụng return false trong mọi tình huống. Khi đưa ra một hàm javascript trong thuộc tính href và nếu bạn trả về false thì người dùng sẽ được chuyển hướng đến một trang có chuỗi giả được viết.


18
2017-08-31 12:04



Không có trong bất kỳ trình duyệt nào tôi từng gặp. Có lẽ bạn nhầm lẫn điều đó với <a href="javascript:return false" hay gì đó? - mplungjan
-1; tuyên bố rằng a href trả về false sẽ tạo ra một trang văn bản có từ "false" được viết trên đó hoàn toàn vô nghĩa. - Mark Amery
(trừ) 1; liên kết bị hỏng + hoàn thành vô nghĩa - Phil