preventDefault() và return false là những cách khác nhau để ngăn sự kiện mặc định xảy ra.

Ví dụ: khi người dùng nhấp vào một liên kết bên ngoài, chúng tôi sẽ hiển thị phương thức xác nhận yêu cầu người dùng chuyển hướng đến trang web bên ngoài hay không:

				
					hyperlink.addEventListener('click', <a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> (e) {
    // Không bị chuyển hướng người dùng đến liên kết.
    e.preventDefault();
});
				
			
Hoặc chúng tôi không muốn gửi biểu mẫu khi nhấp vào nút gửi. Thay vào đó, chúng tôi muốn xác thực biểu mẫu trước khi gửi:
				
					submitButton.addEventListener('click', function (e) {
    // Không hiển thị biểu mẫu khi ấn gửi.
    e.preventDefault();
});
				
			

Return false 

return false không có bất kỳ ảnh hưởng nào đến hoạt động mặc định nếu bạn sử dụng addEventListener, phương thức này để xử lý một sự kiện. Nó chỉ hoạt động khi việc xử lý sự kiện được khai báo là thuộc tính của phần tử:

				
					 // Vẫn bị chuyển hướng đến trang web bên ngoài.
 hyperlink.addEventListener('click', function (e) {
   
    return false;
});

// Dùng để khi nhấp vào nút sẽ không bị chuyển hướng đến trang web bên ngoài.
hyperlink.onclick = function (e) {
    return false;
};
				
			

Theo thông số kỹ thuật của HTML 5 , return false sẽ hủy bỏ sự kiện ngoại trừ mouseover.

Khuyên dùng

  1. Bạn nên sử dụng preventDefault phương thức này thay vì return false bên trong trình xử lý sự kiện. Bởi vì cái sau chỉ hoạt động với việc sử dụng onclick thuộc tính sẽ loại bỏ các trình xử lý khác cho cùng một sự kiện.

  2. Nếu bạn đang sử dụng jQuery để quản lý các sự kiện thì bạn có thể sử dụng return false trong trình xử lý sự kiện

học lập trình frontend, fullstack hà nội, 48
				
					$(element).on('click', function (e) {
    return false;
});
				
			

Trước khi trả về giá trị của false , bên xử lý sẽ làm một việc khác. Vấn đề là nếu có bất kỳ lỗi khi đang chạy nào xảy ra trong trình xử lý, thì sẽ không đạt được return false câu lệnh ở cuối.

Trong trường hợp đó, hành vi mặc định sẽ được thực hiện:

học lập trình frontend, fullstack hà nội, 48
				
					$(element).on('click', function (e) {
    // Do something here, but if there's error at runtime
    // ...
    return false;
});
				
			

Có thể bạn chưa biết

Nếu bạn đang sử dụng jQuery để quản lý sự kiện, thì return false sẽ hoạt động giống như các phương thức preventDefault() và stopPropagation()

học lập trình frontend, fullstack hà nội, 48

Leave a Reply

Your email address will not be published. Required fields are marked *