Cách quản lý mặc định của trình duyệt với event.preventDefault () và event.stopPropagation ()

Các trình duyệt có các tương tác và hành vi mặc định cho các sự kiện khác nhau.

Ví dụ:khi người dùng nhấp vào nút "gửi" trên biểu mẫu, biểu mẫu được gửi tới một URL theo mặc định.

Khi phần tử con của một phần tử được nhấp, sự kiện nhấp chuột cũng xảy ra trên phần tử vì nó là vùng chứa chính.

Trong một số trường hợp, bạn có thể muốn ghi đè các giá trị mặc định này. Trong bài viết này, chúng ta sẽ tìm hiểu event.preventDefault() là gì và event.stopPropagation() các phương thức và cách sử dụng chúng để hủy bỏ một số hành động mặc định xảy ra trong trình duyệt.

event.preventDefault ()

Phương pháp này ngăn các hành động mặc định mà trình duyệt thực hiện khi một sự kiện được kích hoạt.

Dưới đây là một số ví dụ về các tác vụ mặc định trên trang web và cách ghi đè chúng bằng event.preventDefault() .

Cách ghi đè gửi biểu mẫu mặc định

Khi người dùng gửi biểu mẫu (nhấp vào nút gửi), hành động mặc định của biểu mẫu là gửi dữ liệu của biểu mẫu đến một URL xử lý dữ liệu.

Các phần tử biểu mẫu có action và method các thuộc tính chỉ định URL để gửi biểu mẫu và loại yêu cầu (get , post , v.v.), tương ứng.

Nếu các thuộc tính này không được cung cấp, URL mặc định là URL hiện tại mà biểu mẫu đã được gửi và phương thức là get .

Ví dụ:mã này:

<form>
  <input name="email" />
  <input name="password" />
  <input type="submit" />
</form>

tạo ra trang này:

Khi gửi biểu mẫu với đầu vào là "dillion" và "password", bạn có thể thấy get yêu cầu được gửi tới 127.0.0.1:5500/index.html như thế này:

Hành động này là cách trình duyệt xử lý biểu mẫu theo mặc định.

Nhưng bạn có thể muốn thực hiện nhiều thao tác hơn đối với dữ liệu trước khi gửi yêu cầu. Điều này đặc biệt phổ biến trong cách tiếp cận xử lý biểu mẫu ngày nay.

Bạn có thể muốn thực hiện một số xác thực dữ liệu, kiểm tra dữ liệu, xử lý, định cấu hình tiêu đề, v.v. trước khi gửi yêu cầu đến một URL.

Trong các trường hợp này, bạn sẽ muốn ngăn hành động mặc định của biểu mẫu. Đây là cách thực hiện:

<form id='form'>
  ...
</form>

const form = document.getElementById('form')

form.addEventListener('submit', (event) => {
  event.preventDefault()
  
  // process data and submit a request manually
})

Bằng cách này, việc gửi biểu mẫu nằm trong tay bạn.

Cách ghi đè hành động mặc định khi nhấp vào liên kết

Khi bạn nhấp vào một liên kết (thẻ liên kết a với href thuộc tính), hành động mặc định là điều hướng trên trình duyệt đến liên kết được nhấp.

Điều gì sẽ xảy ra nếu bạn muốn chặn hành động đó và có thể làm điều gì đó trước khi điều hướng? Ví dụ:kiểm tra xem người dùng có quyền truy cập vào trang mà họ muốn điều hướng đến hay không. Đây là cách bạn làm điều đó:

<a id="link" href="https://google.com">Google</a>

const link = document.getElementById("link")

link.addEventListener("click", event => {
  event.preventDefault()

  // do something and navigate
})

Bạn có thể kiểm tra nó ra. Khi bạn nhấp vào liên kết "Google", không có điều hướng nào xảy ra - bởi vì bạn đã ngăn chặn hành động điều hướng mặc định. Bây giờ, bạn phải tự xử lý điều hướng.

event.stopPropagation ()

Tuyên truyền là hành động truyền bá một cái gì đó, trong trường hợp này là các sự kiện. stopPropagation được sử dụng để ngăn chặn sự lan truyền của các sự kiện khi một sự kiện được kích hoạt trên một phần tử.

Trong JavaScript, khi bạn kích hoạt một sự kiện trên một phần tử, nó sẽ làm bong bóng cây đối với cha mẹ và tổ tiên của phần tử đó. Về cơ bản, phần tử có sự kiện nằm "bên trong" vùng chứa của cha, vì vậy phần tử cha cũng nhận được các sự kiện.

Để giải thích điều này tốt hơn, tôi sẽ sử dụng một ví dụ.

Nhấp vào phần tử con

Giả sử bạn có các yếu tố sau:

<div>
  <button>Click me</button>
</div>

Khi bạn nhấp vào button , bạn cũng đang nhấp vào div thùng chứa vì nút nằm trong thùng chứa. Logic này có nghĩa là sự kiện nhấp chuột lan truyền từ nút đến vùng chứa và sự kiện tiếp tục lan truyền đến tất cả các ông bà cho đến khi nó đến gốc.

Để xác minh điều này, tôi sẽ giải thích cách hoạt động của điều này với mã này:

<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')
})

Khi bạn cố gắng chạy điều này trên trình duyệt của mình và bạn nhấp vào nút, bạn sẽ nhận được kết quả sau:

div vùng chứa cũng nhận được sự kiện nhấp chuột, vì vậy hàm gọi lại nhấp chuột cũng được gọi.

Sự lan truyền sự kiện là hành vi mặc định của các sự kiện và phần tử, nhưng trong một số trường hợp, bạn có thể không muốn một số hành vi. Trong số nhiều ví dụ, đây là một ví dụ.

Đây là cửa sổ bật lên Thư mới của Gmail:

Ở trên cùng, bạn có ba nút tác vụ. Một cái thu nhỏ cửa sổ bật lên, một cái làm cho cửa sổ bật lên toàn màn hình và một cái đóng cửa sổ bật lên.

Nhưng thanh trên cùng, với văn bản "Tin nhắn mới", cũng có một trình xử lý nhấp chuột, để khi được nhấp vào, nó sẽ thu nhỏ cửa sổ bật lên:

Một điều bạn muốn tránh ở đây là khi nhấp vào bất kỳ nút nào, bạn không muốn sự kiện nhấp chuột truyền lên thanh trên cùng và cũng thực thi chức năng cho sự kiện đó. Ý tôi là, khi nhấp vào nút đóng, chẳng hạn, bạn không muốn thanh trên cùng cũng thu nhỏ.

Trong những trường hợp như thế này, bạn muốn dừng việc truyền bá.

Giả sử cửa sổ bật lên được tạo như thế này:

<div id='top-bar'>
  <!-- The Message Element -->
  <!-- The Buttons -->
</div>

const topBar = document.getElementById('top-bar')
const closeButton = document.getElementById('close-btn')

topBar.addEventListener('click', () => {
  // minimize or maximize popup
})

closeButton.addEventListener('click', () => {
  // close popup
})

Bạn cũng sẽ muốn thêm stopPropagation tới trình nghe của nút, để tránh lan truyền sự kiện lên thanh trên cùng. Để làm như vậy, bạn sẽ cập nhật trình nghe của nút thành:

closeButton.addEventListener('click', (event) => {
  event.stopPropagation()
  // close popup
})

Với điều này, thanh trên cùng sẽ chỉ nhận được sự kiện nhấp chuột khi nó được nhấp trực tiếp vào.

Kết thúc

Sự khác biệt giữa event.preventDefault() và event.stopPropagation() là cái trước ngăn các hành động mặc định do trình duyệt thực hiện, trong khi cái sau ngăn các hành vi mặc định của các sự kiện –propagating cây.

Những hành động và hành vi mặc định này không phải là sai lầm và bạn không phải lo lắng về chúng trong khi viết mã. Nhưng có những trường hợp bạn muốn ghi đè chúng, như chúng ta đã thấy trong các ví dụ trong bài viết này.