DIV zusammen mit onclick und inside href Link

Manchmal möchtest Du ein (Hintergrund) DIV Container verlinken, der aber im inneren einen oder mehrere Links enthält. Wenn Du auf den div Container jetzt ein einfaches onclick="window.open('link')" anwendest und auf den „normalen“ href Link innerhalb des div Containers klickst, bekommst Du beide Seite gleichzeitig geöffnet. Einmal die des href Links und einmal die des onclick JavaScript Events.

DIV Container klickbar machen, ohne den inside href Link zu stören

div onclick href link
Im Prinzip musst Du nur das

onclick="window.open('link')"

gegen

onclick="location.href('link')"

austauschen. Jetzt wird jeweils abhängig davon, wohin man klickt, entweder der inside href Link oder der onclick Link ausgeführt.

Wenn Dein Template zu viele Änderungen erfordern würde oder Du bestehende Strukturen nicht ändern möchtest oder kannst, kannst Du das Ganze auch in einer externen JavaScript Datei einbinden und mit einem (jQuery) Click Event abfangen.

jQuery('#divID').click(function () {
   window.location.href='http://www.tld.de/link';
});

Beispiel:

Du möchtest temporär für Weihnachten ein sonst unauffälliges DIV weihnachtlich dekorieren und baust ein Hintergrund Image ein. Jetzt soll das DIV natürlich auf ein Klick hören und irgendwohin leiten. Im DIV befindet sich aber diverse Links.

Da das Ganze nur temporär ist, Du die Linkpower auf eine temporäre Seite nicht durchfließen lassen musst und es schnell gehen soll packst Du einfach die eine Zeile JavaScript rein und gut ist!
Edit: Google ließt (mittlerweile) auch Links, die rein im Javascript stehen, siehe hier

So geschehen hier:
div elemente onclick richtig verlinken

3 Kommentare » Schreibe einen Kommentar

  1. Hallo,

    ich hoffe das ist noch nicht zu spät und ich noch eine Antwort kriege.
    Das heisst, wenn ich den Link z.B. so einbaue:
    <a onclick="WPBannerizeJavascript.incrementClickCount(187)" href="test.de….
    der Link absolut keine "Power" bzw. Linkjuice abkriegt?

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.