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ả ba cách viết đều đưa về kết quả gần như nhau, cùng tìm hiểu sự khác nhau giữa các phương thức này nhé.

1. event.preventDefault()

Phương thức preventDefault() của đối tượng event được sử dụng để ngăn chặn xử lý mặc định của trình duyệt khi xảy ra sự kiện.

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

<a href="https://kentrung256.blogspot.com">Trang chủ</a>

<script>
$("a").click(function (event) {
    alert("bạn đã nhấp vào link");
    event.preventDefault();
});
</script>

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 https://kentrung256.blogspot.com

2. 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ử cha của phần tử diễn ra sự kiện.

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

<p onclick="parentEvent()">
    <a href="https://kentrung256.blogspot.com">Trang chủ</a>
</p>

<script>
// hàm callback xử lý sự kiện click vào phần tử "p"
function parentEvent() {
    alert("bạn đã nhấp chuột vào phần tử p");
};

// đoạn mã jQuery đăng ký hàm callback để xử lý sự kiện click vào phần tử "a"
$("a").click(function (event) {
    alert("bạn đã nhấp vào link");
    event.stopPropagation();
});
</script>

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 link    

Tiếp theo event.stopPropagation() sẽ ngăn cản sự kiện này lan toả tới phần tử cha là thẻ 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 đượ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 https://kentrung256.blogspot.com

3. return false

Câu lệnh return false trong hàm callback của JavaScript để xử lý một sự kiện 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ư preventDefault
+ Ngăn cản sự kiện lan toả tới phần tử cha giống như stopPropagation

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

<p onclick="parentEvent()">
    <a href="www.hoclaptrinh.org">Trang chủ</a>
</p>

<script>
// hàm callback xử lý sự kiện click vào phần tử "p"
function parentEvent() {
    alert("bạn đã nhấp chuột vào phần tử p");
};

// đoạn mã jQuery đăng ký hàm callback để xử lý sự kiện click vào phần tử "a"
$("a").click(function (event) {
    alert("bạn đã nhấp vào link");
    return false;
});
</script>

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 link

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ử cha p.

Xin cảm ơn và hẹn gặp lại các bạn trong các bài viết tiếp theo!