Div mit onClick und enthaltenem Link

[Synonym]

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.

[chris21]

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

[Synonym]

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)?

[chris21]

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.

[Synonym]

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!

[chris21]

@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.

[Synonym]

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

[Synonym]

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 !

[Synonym]

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>

[chris21]

Ich würde die span in den h3 integrieren.

[Synonym]

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...