Aktualizacja z listopada 2020 r .: Myślę, że najlepszą możliwą techniką jest metoda 4 w tym artykule. Element (lub jakikolwiek inny element opakowania) pozostaje semantyczny i dostępny, będąc „klikalnym” na całym obszarze. Nie przerywa zaznaczania tekstu i nie narusza innych „zagnieżdżonych” elementów interaktywnych.
To jest całkowicie poprawny HTML:
anything I pamiętaj, że możesz tworzyć linki display: block;, więc cały prostokątny obszar staje się „klikalny”. Ale jeśli jest tam mnóstwo treści, jest to absolutnie okropne dla dostępności, czytając całą tę zawartość jako interaktywny link.
Jeśli absolutnie musisz używać JavaScript, jednym ze sposobów jest znalezienie linku wewnątrz elementu div i przejście do niego hrefpo kliknięciu elementu div. To jest z jQuery:
$(".myBox").click(function() ( window.location = $(this).find("a").attr("href"); return false; ));Szuka linku w elemencie div z klasą „myBox”. Przekierowuje do tej wartości linku po kliknięciu dowolnego elementu div.
Referencyjny kod HTML:
blah blah blah. link Lub możesz ustawić data-*atrybut na i zrobić:
window.location = $(".myBox").data("location");