Hit-testing, Pointer-events Và Event Propagation

Trong phát triển giao diện hiện đại, việc xử lý tương tác không chỉ dừng lại ở việc gán một hàm addEventListener. Đằng sau một cú click chuột đơn giản là một chuỗi các quy trình phức tạp từ tầng Rendering Engine của trình duyệt đến tầng Logic của JavaScript. Hiểu rõ mối quan hệ giữa Hit-testing, Pointer-events và Event Propagation là chìa khóa để tối ưu hiệu suất và xử lý các kịch bản UI phức tạp.

1. Tổng quan về vòng đời của một sự kiện tương tác

Khi người dùng thực hiện một hành động (Click, Touch, Hover) trên màn hình, trình duyệt không ngay lập tức biết được phần tử nào cần nhận sự kiện. Nó phải trải qua ba giai đoạn chính:

1. Giai đoạn Hình học (Hit-testing): Trình duyệt xác định tọa độ và tìm kiếm phần tử vật lý nằm dưới điểm chạm.
2. Giai đoạn Lọc (Pointer-events): Hệ thống kiểm tra các thuộc tính CSS để quyết định xem phần tử đó có “cho phép” tương tác hay không.
3. Giai đoạn Lan truyền (Event Propagation): Sau khi xác định được đối tượng mục tiêu (Event Target), sự kiện bắt đầu hành trình di chuyển trong cây DOM để kích hoạt các hàm xử lý (Event Listeners).

2. Hit-testing: Cơ chế xác định mục tiêu ở tầng Rendering

Hit-testing là một thuật toán hình học được thực hiện bởi Rendering Engine để xác định phần tử nào tương ứng với một tọa độ cụ thể trên màn hình.

2.1. Thuật toán duyệt ngược (Reverse-order Traversal)

Thay vì duyệt từ phần tử gốc (Root) xuống, trình duyệt thường thực hiện duyệt ngược từ các phần tử ở lớp trên cùng (top-most) về phía dưới. Quá trình này diễn ra dựa trên Stacking Context (Ngữ cảnh xếp chồng).

• Trình duyệt kiểm tra các phần tử có z-index cao nhất trước.
• Nếu hai phần tử cùng cấp, phần tử nào xuất hiện sau trong mã nguồn HTML sẽ được ưu tiên kiểm tra trước.

2.2. Các yếu tố ảnh hưởng đến Hit-testing

Quá trình này không chỉ dựa vào tọa độ $x, y$ mà còn phụ thuộc vào các thuộc tính định hình không gian hiển thị:

• Layout Geometry: Kích thước (width, height) và vị trí (top, left) của Box Model.
• Compositing Layers: Các phần tử được đẩy lên lớp phần cứng (GPU) thông qua will-change hoặc transform: translateZ(0) có thể thay đổi cách trình duyệt tính toán vùng va chạm.
• Clipping & Masking: Nếu một phần tử bị ẩn bởi overflow: hidden, clip-path hoặc mask, các vùng bị cắt bỏ sẽ không còn nhận diện được các sự kiện chuột.
• Transforms: Các phép biến hình 2D/3D làm thay đổi ma trận tọa độ. Trình duyệt phải tính toán ngược (inverse transform) để chuyển đổi tọa độ chuột từ không gian màn hình về không gian của phần tử đã bị biến dạng.

3. Pointer-events: Lớp điều khiển bằng CSS

Nếu Hit-testing là “tìm kiếm”, thì pointer-events là “bộ lọc”. Đây là thuộc tính CSS cho phép nhà phát triển can thiệp vào quá trình Hit-testing mà không cần thay đổi cấu trúc DOM.

3.1. Cơ chế hoạt động của pointer-events: none

Khi thiết lập pointer-events: none, phần tử đó trở nên “vô hình” đối với các sự kiện tương tác. Tuy nhiên, cần lưu ý:

• Phần tử vẫn hiển thị bình thường về mặt thị giác.
• Sự kiện sẽ “xuyên thấu” qua phần tử này để đến với phần tử nằm ngay bên dưới nó trong Stacking Order.
• Nó không làm mất đi khả năng tương tác của các phần tử con bên trong nếu các con đó được đặt lại là pointer-events: auto.

3.2. Sự khác biệt giữa HTML và SVG

Trong HTML, chúng ta chủ yếu sử dụng auto và none. Tuy nhiên, trong SVG, thuộc tính này mạnh mẽ hơn nhiều với các giá trị như:

• visiblePainted: Chỉ nhận sự kiện nếu phần đó được tô màu.
• stroke: Chỉ nhận sự kiện khi người dùng click vào đường viền.
• fill: Chỉ nhận sự kiện khi người dùng click vào vùng lõi.

3.3. Hiệu suất và Khả năng truy cập (Accessibility)

Một sai lầm phổ biến là dùng pointer-events: none để vô hiệu hóa một nút bấm (Button). Mặc dù người dùng không thể click, nhưng họ vẫn có thể dùng phím Tab để tập trung (focus) và nhấn Enter.

Nguyên tắc: Để vô hiệu hóa hoàn toàn, hãy sử dụng thuộc tính HTML disabled kết hợp với CSS để đảm bảo cả trải nghiệm người dùng và thiết bị hỗ trợ (Screen Reader).

4. Event Propagation: Hành trình trong cây DOM

Khi Hit-testing thành công và vượt qua bộ lọc Pointer-events, trình duyệt tạo ra một đối tượng Event. Lúc này, quá trình Lan truyền sự kiện (Event Propagation) bắt đầu.

4.1. Ba giai đoạn của sự kiện (The Three Phases)

Theo tiêu chuẩn W3C, một sự kiện di chuyển theo sơ đồ hình chữ U:

1. Capture Phase (Giai đoạn Bắt giữ): Sự kiện đi từ Window -> Document -> <html> -> … xuống đến cha trực tiếp của phần tử mục tiêu.
2. Target Phase (Giai đoạn Mục tiêu): Sự kiện kích hoạt tại chính phần tử người dùng đã tương tác.
3. Bubble Phase (Giai đoạn Nổi bọt): Sự kiện ngược dòng từ phần tử mục tiêu trở lại các cấp cha cho đến Window.

4.2. Stop Propagation vs. Prevent Default

• e.stopPropagation(): Dừng hành trình của sự kiện tại cấp hiện tại. Nó ngăn không cho các phần tử cha nhận được sự kiện đó.
• e.stopImmediatePropagation(): Mạnh hơn stopPropagation, nó không chỉ dừng lan truyền lên cha mà còn ngăn các handler khác gắn trên cùng một phần tử thực thi.
• e.preventDefault(): Không dừng lan truyền, nhưng ngăn chặn hành vi mặc định của trình duyệt (ví dụ: ngăn chuyển trang khi click link <a>).

5. Mối quan hệ tương hỗ và Thứ tự thực thi

Hiểu về sự phối hợp giữa ba cơ chế này giúp giải quyết các bug “click mà không chạy”:

1. Input Event: Người dùng click vào tọa độ (100, 200).
2. Hit-testing (Engine): Trình duyệt tìm thấy div.overlay và button.submit tại tọa độ đó. div.overlay nằm trên.
3. Pointer-events Check (CSS):
   • Nếu div.overlay có pointer-events: none, mục tiêu (target) được chuyển xuống button.submit.
   • Nếu div.overlay có pointer-events: auto, mục tiêu là div.overlay.
4. Propagation (DOM): Khi target được xác định (ví dụ là button), sự kiện bắt đầu Capturing từ Window xuống và Bubbling ngược lại.

6. Ứng dụng thực tiễn trong phát triển UI cao cấp

6.1. Kỹ thuật “Click-through” Overlay

Trong các ứng dụng Dashboard, chúng ta thường có các lớp phủ (overlay) để tạo hiệu ứng mờ hoặc đổ bóng. Để các lớp này không chặn tương tác của biểu đồ bên dưới:

CSS

.chart-overlay {
  position: absolute;
  pointer-events: none; /* Cho phép click xuyên qua lớp phủ */
  opacity: 0.5;
}

6.2. Event Delegation (Ủy quyền sự kiện)

Thay vì gắn listener cho 1000 dòng trong một bảng (Table), chúng ta gắn duy nhất một listener tại thẻ <table>. Tận dụng cơ chế Bubbling, khi click vào <td>, sự kiện nổi bọt lên <table> và chúng ta kiểm tra e.target để biết dòng nào được chọn. Điều này giúp tiết kiệm bộ nhớ và tăng hiệu suất đáng kể.

6.3. Xử lý Modal và Backdrop

Khi một Modal mở ra, chúng ta thường muốn block mọi tương tác với phần còn lại của trang web. Lúc này, lớp backdrop sẽ được thiết lập pointer-events: auto (mặc định) và phủ kín màn hình, đóng vai trò như một “bức tường” ngăn Hit-testing tiếp cận các phần tử phía sau.

7. Kết luận

Sự tương tác trên web không đơn thuần là các lệnh JavaScript riêng lẻ mà là sự hợp nhất của ba hệ thống: Vật lý hình học (Hit-testing), Quy tắc hiển thị (Pointer-events) và Cấu trúc dữ liệu (Event Propagation).

Việc nắm vững kiến trúc này không chỉ giúp bạn xử lý các tình huống UI phức tạp (như lồng ghép các phần tử transform 3D, xử lý sự kiện trong SVG) mà còn giúp tối ưu hóa hiệu suất ứng dụng thông qua việc giảm thiểu các tính toán không cần thiết trên Main-thread. Một kiến trúc tương tác chuyên nghiệp luôn bắt đầu từ việc hiểu rõ cách trình duyệt “nhìn” và “phản hồi” với từng điểm chạm của người dùng.