Khác nhau giữa preventdefault và stoppropagation 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().

Bạn đang xem: Khác nhau giữa preventdefault và stoppropagation và return false

$(“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?

40 upvote 6 downvote
Reply Save
Edit
Submit Cancel

2 Answer(s)

*

Hẹp Đường • 10 08, 2020
thích bóng đá vào bongdalu nhé mình thích bóng đá luôn muốn chia sẻ bóng đá nhưng không biết ở đâu.

50 upvote 7 downvote
Reply Save
thích bóng đá vào bongdalu nhé mình thích bóng đá luôn muốn chia sẻ bóng đá nhưng không biết ở đâu.
Submit Cancel
Submit Cancel

*

Đình Anh • 26 03, 2019

event.preventDefault()

Phương thức preventDefault() của đối tượng event đượ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:

Trang chủ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:

Có thể bạn quan tâm:  Khám dinh dưỡng cho bé ở đâu hcm

bạn đã nhấp vào linkđồ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ượng event đượ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.

Xem thêm: Công Ty Thương Mại Dịch Vụ Thương Mại Là Gì? Đặc Trưng Của Dịch Vụ Thương Mại

Ví dụ với đoạn mã sau:

Trang chủ

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:

bạn đã nhấp vào linkTiế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àm parentEventHandler() 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ụ:

Ngăn chặn cách xử lý mặc định của trình duyệt khi sự kiện xảy ra giống như event.preventDefault().Ngăn cản sự kiện lan toả tới phần tử mẹ giống như event.stopPropagation().

Có thể bạn quan tâm:  Tìm hiểu loài chim ăn thịt khổng lồ mệnh danh “chúa tể bầu trời“

Xem thêm: 11+ Cách Cắm Hoa Đơn Giản Và Ý Nghĩa Gì? Cách Cắm Hoa Dơn Ngày Tết Đẹp, Tươi Lâu

Ví dụ với đoạn mã sau:

Trang chủ

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:

bạn đã nhấp vào linkVà 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.

## event.preventDefault()Phương thức `preventDefault()` của đối tượng `event` đượ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:“`jsTrang chủ“`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: bạn đã nhấp vào linkđồ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ượng `event` đượ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:“`js Trang chủ“`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: bạn đã nhấp vào linkTiế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àm `parentEventHandler()` 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 falseCâ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ụ:- Ngăn chặn cách xử lý mặc định của trình duyệt khi sự kiện xảy ra giống như `event.preventDefault()`.- Ngăn cản sự kiện lan toả tới phần tử mẹ giống như `event.stopPropagation()`.Ví dụ với đoạn mã sau:“`js

Có thể bạn quan tâm:  Cách bấm huyệt trị đau đầu

Trang chủ

“`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: bạn đã nhấp vào linkVà 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`.
Submit Cancel
Submit Cancel

Chuyên mục: kiến thức

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *