Jadikan Seluruh Div Boleh Diklik - Trik CSS

Anonim

Kemas kini November 2020: Saya fikir teknik terbaik untuk ini adalah Kaedah 4 dalam artikel ini. The (atau apa sahaja elemen wrapper) kekal semantik dan boleh diakses, pada masa yang sama "yang boleh diklik" ke seluruh kawasan. Ia tidak melanggar pemilihan teks dan menghormati elemen interaktif "bersarang" yang lain.

Ini adalah HTML yang betul:

 anything 

Dan ingat anda boleh membuat pautan display: block;, sehingga seluruh kawasan segi empat menjadi "dapat diklik". Tetapi, jika terdapat banyak kandungan di dalamnya, sangat sukar untuk dilayari, membaca semua kandungan itu sebagai pautan interaktif.

Sekiranya anda benar-benar perlu menggunakan JavaScript, salah satu caranya adalah dengan mencari pautan di dalam div dan pergi ke pautan tersebut hrefketika div diklik. Ini dengan jQuery:

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

Mencari pautan di dalam div dengan kelas "myBox". Pengalihan ke nilai pautan itu apabila di mana sahaja di div diklik.

HTML Rujukan:

 blah blah blah. link 

Atau, anda boleh menetapkan data-*atribut pada dan seperti:

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