Làm cách nào để ngăn sự kiện onclick của cha mẹ kích hoạt khi một đứa trẻ được nhấp vào?

Vì vậy, bạn đã tạo một div có onClick để chuyển hướng đến một liên kết hoặc thực hiện bất kỳ chức năng bình thường nào. Nhưng div đó cũng chứa các phần tử con có thể thực hiện các chức năng khác hoặc không làm gì cả và vẫn đang thực hiện chức năng của phần tử cha. Có một giải pháp rất đơn giản để khắc phục điều này

Giả sử mã phản ứng này

import React from 'react'

const NormalReactElement = [] => {
   return [
       console.log['Parent Element!']}>
         
            I am a child element
         
      
   ]
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Vì vậy, làm thế nào để bạn khắc phục điều này?

const NormalReactElement = [] => {

   const handleChildElementClick = [e] => {
      e.stopPropagation[]
      // Do other stuff here
   }

   return [
       console.log['Parent Element!']}>
          handleChildElementClick[e]}>
            I am a child element
         
      
   ]
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hy vọng bạn thích giải pháp nhanh chóng cho vấn đề này, hẹn gặp lại bạn trong bài viết tiếp theo

Vì vậy, về cơ bản, chuyển true làm đối số thứ ba của addEventListener yêu cầu JavaScript sử dụng chế độ chụp thay vì chế độ sủi bọt. Và trong chế độ chụp, sự kiện được kích hoạt cho cha mẹ sau đó chuyển xuống phần tử con của nó, điều này ngược lại với sự kiện sủi bọt

Chúng tôi chỉ muốn chạy logic trong hàm handleParentClick khi phần tử cha được nhấp chứ không phải phần tử con

Trong trình xử lý sự kiện onClick của cha mẹ, chúng tôi phải so sánh các giá trị của event.target và event.currentTarget

Thuộc tính target trên event cung cấp cho chúng tôi một tham chiếu đến phần tử đã kích hoạt sự kiện [phần tử đã được nhấp]

Mặt khác, thuộc tính currentTarget trên sự kiện trả về phần tử mà trình lắng nghe sự kiện được gắn vào

Sự kiện. thuộc tính currentTarget luôn đề cập đến phần tử mà trình xử lý sự kiện đã được đính kèm, trái ngược với Sự kiện. mục tiêu đề cập đến phần tử mà sự kiện xảy ra và có thể là hậu duệ của nó

Nếu phần tử kích hoạt sự kiện và phần tử mà trình lắng nghe sự kiện được đính kèm giống nhau, thì người dùng đã nhấp vào phần tử cha

Sử dụng sự kiện. ngừng lan truyền

Nếu phần tử con của bạn cũng có trình xử lý sự kiện, bạn có thể sử dụng Sự kiện. phương thức stopPropagation[] để ngăn chặn sự lan truyền thêm của sự kiện hiện tại trong giai đoạn chụp và tạo bọt

Chúng tôi đã sử dụng phương pháp stopPropagation[] trong trình xử lý sự kiện onClick của phần tử con. Điều này có nghĩa là sự kiện onClick của cha mẹ sẽ không được kích hoạt khi phần tử con được nhấp vào

Theo mặc định, khi sự kiện onClick của phần tử con được kích hoạt, sự kiện trên phần tử cha cũng sẽ được kích hoạt, nhưng phương thức stopPropagation[] ngăn hành vi này

Cái nào ngăn sự kiện sủi bọt đến các phần tử gốc?

Làm cách nào để ngăn hành động nhấp chuột trong JavaScript?

Sự kiện nào được kích hoạt khi một nút được bấm?

Sự kiện nào được kích hoạt khi người dùng nhấp vào một phần tử?