khác nhau giữa "event.preventDefault()" và "return false"
Khi viết hàm callback cho một sự kiện nào đó như click vào một button để ngăn trình duyệt không xử lý sự kiện click theo như mặc định thì cả hai cách viết như ở dưới đây đều đưa về kết quả như nhau:
Cách 1: Sử dụng event.preventDefault()
.
$("button").click(function (event) {
// code ...
event.preventDefault()
});
Cách 2: Sử dụng return false;
.
$("button").click(function () {
// code ...
return false;
});
Ngoài việc khi sử dụng return false
thì không cần phải quan tâm tới tham số truyền vào là event
thì giữa event.preventDefaul()
và return false
còn có điểm nào khác nhau?
Guest
- 1970/01/01 Trả lờisdsd
Guest
- 1970/01/01 Trả lờievent.preventDefault()
Phương thức
preventDefault()
của đối tượngevent
được sử dụng để ngăn chặn cách xử lý mặc định của trình duyệt khi xảy ra sự kiện.Ví dụ đoạn mã sau:
thì khi người dùng nhấp vào link liên kết trình duyệt sẽ hiển thị hộp thoại cảnh báo với nội dung:
đồng thời ngăn cản trình duyệt chuyển tiếp người dùng tới trang đích của link liên kết.
event.stopPropagation()
Phương thức
stopPropagation()
của đối tượngevent
được sử dụng để ngăn không cho sự kiện lan toả lên các phần tử mẹ của phần tử mà ở đó diễn ra sự kiện.Ví dụ với đoạn mã sau:
Thì khi người dùng click vào phần tử
a
(đồng thời cũng là click vào phần tửp
chứa phần tửa
) thì trình duyệt sẽ hiển thị hộp thoại cảnh báo với nội dung:Tiếp theo, sử dụng
event.stopPropagation()
trong hàm callback xử lý sự kiện nhấp chuột vào link liên kết sẽ ngăn cản sự kiện này lan toả tới phần tử mẹp
. Do đó hàmparentEventHandler()
sẽ không được gọi và sẽ không có hộp thoại cảnh báo nào khác được hiện ra.Cuối cùng, vì trong hàm callback không sử dụng
event.preventDefault()
nên sau đó trình duyệt vẫn sẽ chuyển người dùng tới trang chủ www.hoclaptrinh.org.return false
Câu lệnh
return false
trong hàm callback của JavaScript để xử lý một sự kiện được dùng để thực hiện hai nhiệm vụ:event.preventDefault()
.event.stopPropagation()
.Ví dụ với đoạn mã sau:
Thì khi người dùng nhấp vào link liên kết một hộp thoại cảnh báo được hiện ra với nội dung như sau:
Và sau đó không có bất cứ hành động nào khác diễn ra do
return false
ngăn cản trình duyệt chuyển tiếp người dùng tới trang đích của liên kết đồng thời ngăn cản sự kiện nhấp chuột lan toả tới phần tử mẹp
.