event.preventDefault () so với return false

Khi tôi muốn ngăn các trình xử lý sự kiện khác thực thi 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 cả 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ự lan truyền sự kiện này không?

Đối với tôi, return false;đơn giản hơn, ngắn hơn và có lẽ ít xảy ra lỗi hơn so với thực hiện một phương thức. Với phương pháp, 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 cuộc 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 preventDefaultthay thế? Cách tốt hơn là gì?

return falsetừ bên trong một trình xử lý sự kiện jQuery thực sự giống như gọi cả hai e.preventDefaultvà e.stopPropagationtrên đối tượng jQuery.Event đã truyền .

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

Nguồn: John Resig

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

Từ 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 () so với sử dụng return false. Giả sử bạn đang ghi lại sự kiện nhấp chuột trên thẻ neo, nếu không, đó sẽ là một 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 return 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 return và trình duyệt sẽ tiến hành 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 thời gian chạy ).

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

  // custom handling here

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

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

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

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

Các tài liệu từ MDN giải thích như thế nào return falsetrong một event handler làm việc

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

Để đọc thêm, hãy xem Đính kèm trên MSDN và tài liệu Sự kiện W3C DOM 2 .

Nói chung, tùy chọn đầu tiên của bạn ( preventDefault()) là lựa chọn cần thực hiện, 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 của bạn Mã hóa có một lớn bài viết về return false;vs event.preventDefault()vs event.stopPropagation()vsevent.stopImmediatePropagation() .

Khi sử dụng jQuery, bạn 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 các 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ụ.

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

tôi nghĩ

event.preventDefault()

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

Bạn có thể đọc thông tin này trong thông số W3C về hủy bỏ 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 sai được viết.

Tôi nghĩ cách tốt nhất để làm điều này là sử dụng event.preventDefault()bởi vì nếu một số ngoại lệ được đưa ra trong trình xử lý, thì falsecâu lệnh return sẽ bị bỏ qua và hành vi sẽ ngược lại với những gì bạn muốn.

Nhưng nếu bạn chắc chắn rằng mã sẽ không kích hoạt bất kỳ ngoại lệ nào, thì bạn có thể đi với bất kỳ phương thức nào bạn muốn.

Nếu bạn vẫn muốn thực hiện trả lại false, thì bạn có thể đặt toàn bộ mã xử lý của mình vào một khối thử bắt như bên dưới:

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});

Ý kiến ​​của tôi từ kinh nghiệm của tôi nói rằng nó luôn luôn tốt hơn để sử dụng

event.preventDefault() 

Thực tế để ngăn chặn hoặc ngăn chặn gửi sự kiện, bất cứ khi nào chúng tôi yêu cầu thay vì return false event.preventDefault()hoạt động tốt.

Sự khác biệt chính giữa return falsevà event.preventDefault()là mã của bạn dưới đây return falsesẽ không được thực thi và trong event.preventDefault()trường hợp mã của bạn sẽ thực thi sau câu lệnh này.

Khi bạn viết trở lại sai, nó sẽ làm những điều sau đây cho bạn đằng sau hậu trường.

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();

e.preventDefault ();

Nó chỉ đơn giản là dừng hành động mặc định của một yếu tố.

Ví dụ:

ngăn siêu liên kết theo URL, ngăn nút gửi để gửi biểu mẫu. Khi bạn có nhiều trình xử lý sự kiện và bạn chỉ muốn ngăn sự kiện mặc định xảy ra, & xảy ra nhiều lần, chúng ta cần sử dụng ở đầu hàm ().

Lý do: -

Lý do để sử dụng e.preventDefault();là trong mã của chúng tôi có lỗi xảy ra trong mã, sau đó nó sẽ cho phép thực thi liên kết hoặc biểu mẫu để được gửi hoặc cho phép thực thi hoặc cho phép bất kỳ hành động nào bạn cần làm. & link hoặc nút gửi sẽ được gửi và vẫn cho phép tuyên truyền thêm về sự kiện.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

trả về Sai;

Nó chỉ đơn giản là dừng việc thực thi hàm ().

" return false;" sẽ kết thúc toàn bộ quá trình thực hiện.

Lý do: -

Lý do sử dụng trả lại sai; là bạn không muốn thực thi chức năng nữa trong chế độ nghiêm ngặt.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>

Về cơ bản, cách này bạn kết hợp mọi thứ vì jQuery là một khung công tác chủ yếu tập trung vào các phần tử HTML, về cơ bản bạn ngăn chặn mặc định, nhưng đồng thời, bạn ngừng lan truyền để nổi bong bóng.

Vì vậy, chúng ta có thể nói một cách đơn giản, trả về false jQuerybằng:

trả về false là e.preventDefault VÀ e.stopPropagation

Nhưng cũng đừng quên tất cả trong các hàm liên quan đến jQuery hoặc DOM, khi bạn chạy nó trên phần tử, về cơ bản, nó ngăn mọi thứ bắn ra bao gồm cả hành vi mặc định và sự lan truyền của sự kiện.

Về cơ bản trước khi bắt đầu sử dụng return false;, trước tiên hãy hiểu những gì e.preventDefault();và e.stopPropagation();làm, sau đó nếu bạn nghĩ rằng bạn cần cả hai cùng một lúc, sau đó chỉ cần sử dụng nó.

Về cơ bản mã này dưới đây:

$('div').click(function () {
  return false;
});

là tương đương với mã này:

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});

Từ kinh nghiệm của tôi event.stopPropagation () chủ yếu được sử dụng trong hiệu ứng CSS hoặc hoạt động hoạt hình, ví dụ khi bạn có hiệu ứng di chuột cho cả yếu tố thẻ và nút, khi bạn di chuột vào nút, cả hai thẻ và hiệu ứng di chuột sẽ được kích hoạt trong trường hợp này , bạn có thể sử dụng event.stopPropagation () dừng các hành động sủi bọt và event.preventDefault () là để ngăn chặn hành vi mặc định của các hành động trình duyệt. Chẳng hạn, bạn có biểu mẫu nhưng bạn chỉ xác định sự kiện nhấp cho hành động gửi, nếu người dùng gửi biểu mẫu bằng cách nhấn enter, trình duyệt được kích hoạt bởi sự kiện nhấn phím, không phải sự kiện nhấp của bạn ở đây, bạn nên sử dụng event.preventDefault () để tránh không phù hợp hành vi. Tôi không biết cái quái gì là trả lại sai; xin lỗi. Để biết thêm chi tiết, hãy truy cập liên kết này và chơi xung quanh với dòng # 33https://www.codecademy.com/cifts/int sinhtion-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv