Ενημέρωση Νοεμβρίου 2020: Νομίζω ότι η καλύτερη δυνατή τεχνική για αυτό είναι η Μέθοδος 4 σε αυτό το άρθρο. Το
(ή οποιοδήποτε στοιχείο περιτυλίγματος) παραμένει σημασιολογικό και προσβάσιμο, ενώ είναι «κλικ» σε ολόκληρη την περιοχή. Δεν διακόπτει την επιλογή κειμένου και σέβεται άλλα "ένθετα" διαδραστικά στοιχεία.
Αυτό είναι απολύτως έγκυρο HTML:
anything
Και θυμηθείτε ότι μπορείτε να δημιουργήσετε συνδέσμους display: block;
, έτσι ολόκληρη η ορθογώνια περιοχή γίνεται «κλικ». Όμως, εάν υπάρχει ένας τόνος περιεχομένου εκεί, είναι απολύτως φρικτό για την προσβασιμότητα, διαβάζοντας όλο αυτό το περιεχόμενο ως διαδραστικό σύνδεσμο.
Εάν χρειάζεστε απολύτως τη χρήση JavaScript, ένας τρόπος είναι να βρείτε έναν σύνδεσμο μέσα στο div και να μεταβείτε σε αυτόν href
όταν κάνετε κλικ στο div. Αυτό είναι με το jQuery:
$(".myBox").click(function() ( window.location = $(this).find("a").attr("href"); return false; ));
Αναζητά έναν σύνδεσμο μέσα στο div με την κλάση του "myBox". Ανακατευθύνσεις σε αυτήν την τιμή συνδέσμων όταν κάνετε κλικ οπουδήποτε στο div
HTML αναφοράς:
blah blah blah. link
Εναλλακτικά, θα μπορούσατε να ορίσετε ένα data-*
χαρακτηριστικό στο
και να κάνετε τα εξής:
window.location = $(".myBox").data("location");