Div mit onClick und enthaltenem Link

Beitrag von **Synonym** » 13.11.2010, 11:47

Hallo zusammen,

ich habe ein Div, das komplett anklickbar sein soll. Per onClick funktioniert das auch wunderbar, ist also nicht so das Problem.

Doch in diesem Div ist Text und auch ein weiterer Link enthalten. Klickt man nun auf den Link, dann wird zum einen das onclick ausgeführt, als auch der eigentliche Link, das ist natürlich nicht sonderlich schön

Beispiel

Code: Alles auswählen

<div onclick="location.href='/seite-1.html';">
	Hier einiges an Text und ein Link zu einer anderen Seite als im onclick<br />
	<a href="seite-2.html">seite-2/a>
</div>

Wie kann man das denn umgehen? Also Klick ins Div -> onclick ausführen; Klick auf den Link -> onclick vom Div ignorieren

Das onClick einfach auf den Text zu legen geht nicht. Das Beispiel ist sehr vereinfacht. In echt ist Text über und unter dem echten Link und links und rechts sind verlinkte Bilder.

Stehe da irgendwie gerade total auf dem Schlauch.

Ok, eines habe ich eben gefunden: "stopPropagation" bzw. "cancelBubble", aber das ist irgendwie nicht das Gelbe vom Ei... Das müsste ich ja in jeden Link und jedes Bild als onclick einbauen. Gefällt mir gar nicht.

von **Anzeige von ABAKUS** »

Hochwertiger Linkaufbau bei ABAKUS:

Google-konformer Linkaufbau
nachhaltiges Ranking
Linkbuilding Angebote zu fairen Preisen
internationale Backlinks

Wir bieten Beratung und Umsetzung.
Jetzt anfragen: 0511 / 300325-0

Beitrag von **chris21** » 13.11.2010, 12:27

Und wenn Du dem a href ein onclick auf seite-2.html mit einem return false verpasst? Schon probiert?

Beitrag von **Synonym** » 13.11.2010, 12:35

Ja, das habe ich schon versucht. Das geht, aber ist fast identisch mit dem "stopPropagation" bzw. "cancelBubble", nur dass das halt aufs Default geht.

Ist halt unschön, denn dann müsste ich bei allen Links und verlinkten Bildern (ca. 9) extra das onclick einbauen, nur weil das umliegende Div eines hat. Und das dann bei etwa 35 dieser Divs pro Seite. Das ist mir ehrlich gesagt ein wenig zu viel Javascript dann.

Also irgendwie suche ich da gerade einen Weg genau in die andere Richtung. Also im vorhandenen onclick zu verhindern, dass das auch bei anderen Links ausgelöst wird. Kann man dieses "Bubbling" denn nicht irgendwie umkehren oder ganz deaktivieren (ohne Event per onclick)?

von **Anzeige von ABAKUS** »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Beitrag von **chris21** » 13.11.2010, 15:43

Moin Ingo,

bei StackOverflow https://stackoverflow.com/questions/796 ... nto-a-link gibt es eine gute Idee, die sogar ganz auf Javascript verzichtet. Lies mal die Antwort von thepeer.

Beitrag von **Synonym** » 13.11.2010, 16:31

Ah, Du meinst sicher das letzte Beispiel. So was in der Art hatte ich schon gefunden, auch mit der jQuery. Das ruft dann aber immer das erste href als Ziel auf, was ja nicht korrekt ist.

Könnte man aber vielleicht modifizieren. Die Id für das Div geht eh nicht, da 35 verschiedene. Dann den ganzen Links noch eine Id bzw. einen Namen geben und wenn der nicht verfügbar ist, dann das onclick bzw. location ausführen, ansonsten nicht.

Mal sehen, ansonsten lass ich das ganze sein, bzw. entferne das onclick einfach.

Danke Dir!

Beitrag von **chris21** » 13.11.2010, 16:43

@Ingo:

ich meinte eigentlich die Lösung ohne Javascript (also auch ohne jQuery

Sprich: innerhalb des div einen span haben, den zu div Größe aufbläht und daneben innerhalb des divs die regulären a hrefs haben, die per z-index nach vorne gepusht werden. Dadurch bubbelts nicht hoch, wenn du auf den href link klickst.

Beitrag von **Synonym** » 13.11.2010, 16:49

Ach so, das meintest Du. Dachte ohne JS in den Links

Das könnte ich durchaus mal versuchen, wenn das denn mit meinem bisherigen Layout kompatibel ist. Da kamen mir nun schon oft irgendwelche Floats oder Positions in die Query

Beitrag von **Synonym** » 13.11.2010, 17:00

Chris, Du bist spitze !!

Das funktioniert. Muss es zwar noch im echten Einsatz testen, ob sich das irgendwo mit meinem Layout beißt oder andere Browser Probleme machen, aber im Test geht es schon mal.

Danke !

Beitrag von **Synonym** » 13.11.2010, 18:04

So, es scheint auch mit dem Layout zu gehen. Ein positiver Nebeneffekt ist sogar, dass zwei bisherige Links entfallen können. Stellt sich nun nur die Frage was Google-technisch besser ist, da es nun ja einen Link ohne Linktext gibt.

H3-Link und der bisherige onclick-Link haben das gleiche Ziel:

1. Leerer Link und Span direkt an den Anfang:

<div class="divbox">
<a href="/seite.html"><span class="myspan"></span></a>
<h3 class="uktitel"><a href="/seite.html" class="mylink">Der Titel</a></h3>
<p><img src="/bild.jpg" width="152" height="114" />
Einiges an Text
<address>Adresse</address></p>
<p>Einiges weitere an Text</p>
<div class="c_left"></div>
</div>

2. Leerer Link und Span direkt an das Ende:

<div class="divbox">
<h3 class="uktitel"><a href="/seite.html" class="mylink">Der Titel</a></h3>
<p><img src="/bild.jpg" width="152" height="114" />
Einiges an Text
<address>Adresse</address></p>
<p>Einiges weitere an Text</p>
<div class="c_left"></div>
<a href="/seite.html"><span class="myspan"></span></a>
</div>

3. Span in die verlinkte H3 integrieren

<div class="divbox">
<h3 class="uktitel"><a href="/seite.html" class="mylink">Der Titel<span class="myspan"></span></a></h3>
<p><img src="/bild.jpg" width="152" height="114" />
Einiges an Text
<address>Adresse</address></p>
<p>Einiges weitere an Text</p>
<div class="c_left"></div>
</div>

Beitrag von **chris21** » 13.11.2010, 22:43

Ich würde die span in den h3 integrieren.

Beitrag von **Synonym** » 14.11.2010, 12:14

Ich würde die span in den h3 integrieren.

Guter Vorschlag, das habe ich so auch schon direkt eingebaut. Der leere Link hat mir doch etwas widerstrebt

Danke Dir nochmal - hatte mich da total im JS-Bereich verrannt...