Trình duyệt có hành vi/interaction mặc định cho các sự kiện khác nhau.
Ví dụ: click nút "submit" trên form → form tự động submit dữ liệu đến URL.
Click child element → sự kiện click cũng xảy ra trên element cha (container chính).
Trong một số trường hợp, bạn muốn ghi đè mặc định này. Bài viết tìm hiểu event.preventDefault() và event.stopPropagation() để hủy một số hành động mặc định của trình duyệt.
event.preventDefault()
Phương thức ngăn hành động mặc định trình duyệt khi event kích hoạt.
Các ví dụ hành động mặc định và cách ghi đè bằng event.preventDefault().
Ghi Đè Mặc Định Submit Form
Khi user submit form (click nút submit), hành động mặc định: gửi dữ liệu form đến URL xử lý.
Form có attribute action và method chỉ định URL submit và loại request (get, post...). Nếu không cung cấp, mặc định URL = URL hiện tại, method = get.
Ví dụ code:
<form> <input name="email" /> <input name="password" /> <input type="submit" /> </form>
Tạo trang:
Submit form với input "dillion" và "password" → thấy request get đến 127.0.0.1:5500/index.html:
Đây là cách trình duyệt xử lý form mặc định.
Nhưng bạn muốn làm thêm việc trước khi gửi request: validate dữ liệu, kiểm tra, xử lý, config header... Phổ biến trong cách xử lý form hiện đại.
Cần ngăn hành động mặc định form. Cách làm:
<form id='form'> ... </form>
const form = document.getElementById('form')
form.addEventListener('submit', (event) => {
event.preventDefault()
// xử lý dữ liệu và gửi request thủ công
})
Bây giờ submit form do bạn kiểm soát.
Ghi Đè Mặc Định Click Link
Click link (thẻ a có href) → mặc định: điều hướng trình duyệt đến link đó.
Muốn chặn hành động đó, làm gì đó trước khi điều hướng? Ví dụ: kiểm tra user có quyền truy cập trang đích. Cách làm:
<a id="link" href="https://google.com">Google</a>
const link = document.getElementById("link")
link.addEventListener("click", event => {
event.preventDefault()
// làm gì đó rồi điều hướng
})
Test: click link "Google" → không điều hướng – vì đã ngăn hành động mặc định. Bây giờ tự xử lý điều hướng.
event.stopPropagation()
Propagation = lan truyền (spreading) sự kiện. stopPropagation ngăn chặn lan truyền event khi kích hoạt trên element.
Trong JavaScript, trigger event trên element → nó nổi bọt (bubble) lên cây DOM đến parent và ancestor. Vì element với event "nằm trong" container cha → cha cũng nhận event.
Ví dụ minh họa:
Click Con Của Element
Giả sử cấu trúc:
<div> <button>Click me</button> </div>
Click button → cũng click div container (button nằm trong container). Logic: event lan từ button → container → các ancestor cho đến root.
Xác minh bằng code:
<div id="div"> <button id="button">Click me</button> </div>
const div = document.getElementById('div')
const button = document.getElementById('button')
button.addEventListener('click', () => { console.log('button clicked') })
div.addEventListener('click', () => { console.log('div container clicked') })
Chạy trình duyệt, click button → kết quả:
div container cũng nhận click event → callback cũng chạy.
Event propagation là hành vi mặc định, nhưng đôi khi không muốn. Ví dụ thực tế:
Popup "New Message" của Gmail:
Top bar có 3 nút: minimize, fullscreen, close.
Nhưng top bar (chữ "New Message") cũng có click handler: click → minimize popup:
Vấn đề: click nút close, không muốn top bar cũng minimize.
Cần stop propagation.
Giả sử popup structure:
<div id='top-bar'> <!-- Message Element --> <!-- Buttons --> </div>
const topBar = document.getElementById('top-bar')
const closeButton = document.getElementById('close-btn')
topBar.addEventListener('click', () => { /* minimize/maximize */ })
closeButton.addEventListener('click', () => { /* close popup */ })
Thêm stopPropagation vào listener nút close:
closeButton.addEventListener('click', (event) => {
event.stopPropagation()
// close popup
})
Khi đó top bar chỉ nhận click khi click trực tiếp lên nó.
Tóm Lại
Khác biệt: event.preventDefault() ngăn hành động mặc định của trình duyệt, event.stopPropagation() ngăn hành vi mặc định của event – lan truyền lên cây DOM.
Hành động/hành vi mặc định không phải lỗi, không cần lo lắng khi code. Nhưng có tình huống muốn ghi đè, như ví dụ trong bài.