click-delegation

Je wil een hele card klikbaar maken. De makkelijke oplossing is er een link omheen slaan, en dan verlies je de kop, de knoppen en alles wat er verder in staat. Deze plugin geeft de klik door aan één link of knop erbinnen, en laat de rest met rust.

Het probleem

Een link om een heel blok heen is verleidelijk, maar hij kost je meer dan je denkt. De hele card wordt één voorleesbare regel, tekst selecteren gaat niet meer zonder ergens heen te navigeren, en een tweede link erbinnen mag helemaal niet.

Het alternatief is een click handler op de card, en die is meestal net zo stuk. Je kunt de link niet meer kopiëren, middelklik opent geen nieuw tabblad, en op een telefoon vuurt hij af terwijl je aan het scrollen bent.

Probeer het zelf

De tweede card telt elke klik, de eerste alleen die op de knop. Selecteer eens wat tekst in de tweede card: dat telt niet als klik, want dat was je ook niet van plan.

Hoe je het gebruikt

<div data-delegate>
  <h2><a href="/pagina" data-delegate-to>Titel</a></h2>
  <p>Klikken op deze card gaat naar /pagina.</p>
</div>

De link blijft een gewone link, dus je kunt hem kopiëren, met de middelste muisknop in een nieuw tabblad openen en ermee door de pagina tabben. Knoppen werken net zo goed als links. De card krijgt de klasse is-clickable mee, zodat je hem kunt vormgeven.

Wat het onderweg opvangt: tekst selecteren telt niet als klik, ctrl-klik en middelklik openen een nieuw tabblad, aanraakschermen en aanwijzers werken allebei, en cards die later worden toegevoegd doen vanzelf mee.

Installeren

npm install click-delegation

Gebruik je geen bundler, dan kun je hem ook met een gewone <script>-tag inladen.

Op npm Op GitHub

Deze site draait er zelf op. De cards op portfolio, artikelen en tools gebruiken deze plugin.

Terug naar alle tools