Cập nhật tháng 11 năm 2020: Tôi nghĩ rằng kỹ thuật tốt nhất có thể cho việc này là Phương pháp 4 trong bài viết này. Phần tử (hoặc bất kỳ phần tử trình bao bọc nào) vẫn có ngữ nghĩa và có thể truy cập được, đồng thời có thể “nhấp được” trên toàn bộ khu vực. Nó không phá vỡ lựa chọn văn bản và tôn trọng các yếu tố tương tác "lồng nhau" khác.
Đây là HTML hoàn toàn hợp lệ:
anything Và hãy nhớ rằng bạn có thể tạo liên kết display: block;để toàn bộ khu vực hình chữ nhật trở nên "có thể nhấp được". Nhưng, nếu có rất nhiều nội dung trong đó, thì việc đọc tất cả nội dung đó dưới dạng liên kết tương tác sẽ rất kinh khủng.
Nếu bạn thực sự cần sử dụng JavaScript, một cách là tìm một liên kết bên trong div và truy cập nó hrefkhi div được nhấp vào. Đây là với jQuery:
$(".myBox").click(function() ( window.location = $(this).find("a").attr("href"); return false; ));Tìm kiếm một liên kết bên trong div với lớp “myBox”. Chuyển hướng đến giá trị liên kết đó khi nhấp vào bất kỳ đâu trong div.
HTML tham chiếu:
blah blah blah. link Hoặc, bạn có thể đặt một data-*thuộc tính trên và làm như sau:
window.location = $(".myBox").data("location");