Nhấn vào khu vực div để truy cập - i9bet

Yêu cầu

Trong trang danh sách sản phẩm hoặc danh sách tin tức của một trang web, ngoài việc có thể nhấn vào tiêu đề để truy cập trang chi tiết, tôi cũng muốn người dùng có thể nhấn vào hình ảnh thu nhỏ để xem thêm thông tin. Thậm chí tốt nhất là toàn bộ khu vực mục con đều có thể nhấp được.

Việc bọc toàn bộ phần tử bên ngoài bằng thẻ <a> không chỉ khiến việc bố trí khó khăn mà còn không hợp lý về mặt ngữ nghĩa. Một cách khác phổ biến hơn là sử dụng JavaScript để thực hiện chuyển hướng khi nhấp chuột. Mặc dù logic rõ ràng nhưng phương pháp này đôi khi cảm thấy hơi rườm rà.

Giải pháp đơn giản với kỹ thuật inset

Tôi chợt tò mò và quyết định kiểm tra cách các thành phần mẫu trong Tailwind CSS xử lý tình huống yêu cầu như vậy. Sau khi tìm hiểu, tôi đã phát hiện ra một ví dụ rất đơn giản và hiệu quả.

Cách làm là đặt một thẻ <span> ẩn bên trong thẻ <a>, sau đó sử dụng vị trí tuyệt đối (absolute) để phủ lên toàn bộ khu vực cần kích hoạt liên kết.

html

<div class="relative">
  ...
  <h3 class="text-sm text-gray-700">
    <a href="#">
      <span aria-hidden="true" class="absolute inset-0"></span>
      Áo thun cơ bản
    </a>
  </h3>
  ...
</div>

css

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0; [i9bet](/blog/enterprise-wechat-develop-service-in-company/) 
  left: 0;
}
.absolute {
  position: [đánh bài online](/blog/running/)  absolute;
}

Mặc dù cách này có vẻ hơi vòng vo lúc đầu, nhưng nó mang lại giải pháp rất gọn gàng và tối ưu. Cách tiếp cận này giúp đảm bảo rằng toàn bộ vùng mục con đều trở thành khu vực nhấp chuột mà không cần đến JavaScript phức tạp hay vi phạm nguyên tắc thiết kế semantic HTML.

Ngoài ra, nhờ sử dụng thuộc tính aria-hidden="true", thẻ <span> sẽ bị ẩn khỏi các công cụ hỗ trợ người khuyết tật (như màn đọc màn hình), giữ nguyên trải nghiệm người dùng cho tất cả mọi người. Đây là một điểm cộng lớn về khả năng tiếp cận (accessibility).

Kết luận, đây là một cách làm thông minh và casino đáng áp dụng nếu bạn đang tìm kiếm giải pháp tối ưu cho vấn đề tương tự.