Faceți clic întreg pe Div - CSS-Tricks

Anonim

Actualizare noiembrie 2020: cred că cea mai bună tehnică posibilă pentru aceasta este Metoda 4 din acest articol. (Sau oricare ar fi elementul de înfășurare) rămâne semantică și accesibilă, fiind în același timp „se poate face clic“ pe întreaga suprafață. Nu întrerupe selecția textului și respectă alte elemente interactive „imbricate”.

Acesta este HTML perfect valid:

 anything 

Și amintiți-vă că puteți crea legături display: block;, astfel încât întreaga zonă dreptunghiulară să devină „clicabilă”. Dar, dacă există o mulțime de conținut acolo, este absolut oribil pentru accesibilitate, citind tot conținutul ca link interactiv.

Dacă aveți absolut nevoie să utilizați JavaScript, o modalitate este să găsiți un link în interiorul divului și să mergeți la acesta hrefatunci când este făcut clic pe div. Aceasta este cu jQuery:

$(".myBox").click(function() ( window.location = $(this).find("a").attr("href"); return false; ));

Caută un link în div cu clasa „myBox”. Redirecționează către acea valoare a legăturilor atunci când se face clic pe oriunde în div.

HTML de referință:

 blah blah blah. link 

Sau, puteți seta un data-*atribut pe și faceți ca:

window.location = $(".myBox").data("location");