Κάντε κλικ σε ολόκληρο το Div - CSS-Κόλπα

Anonim

Ενημέρωση Νοεμβρίου 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");