cyberhorst: DIV verlinken und innen weitere Links

Hallo zusammen,

ich möchte ein gesammtes (großes) DIV (könnte auch ein TR oder TD sein) mittels onclick='location.href=...' verlinken, innerhalb dieses DIVs sollen sich aber noch andere Links befinden, die teilweise ein neues Fentser öffnen sollen (target='_blank').

Das Problem ist jetzt, dass bei einm Klick auf einen der inneren Links  BEIDE Links ausgelöst werden, also sowohl der des umschließenden DIVs als auch der des angeklickten Links. Besonders deutlich wird dies, wenn der Link ein neues Fenster öffnet, da sich dann auch das alte ändert.

Hier ein Beispiel:

<div onclick='location.href="http://xyz.de"' style='background:red;width:400px;height:400px;'>
   <a href='http://abc.de'>gleiches fenster</a><br>
   <a href='http://abc.de' target='_blank'>neues fenster</a><br>
</div>

Gibt es eine Möglichkeit das onclick-Event innerhalb eines anderen Elements zu deaktivieren (ein einfach Neusetzen in <a> bringt nichts, weiterhin wird das alte ausgeführt)?
Oder gibt es eine andere Möglichkeiten dieses Verhalten abzustellen und NUR den einen Link auszuführen.

Danke für eure Idden! - cyberhorst

  1. Yerf!

    Gibt es eine Möglichkeit das onclick-Event innerhalb eines anderen Elements zu deaktivieren (ein einfach Neusetzen in <a> bringt nichts, weiterhin wird das alte ausgeführt)?

    Der innere Eventhandler muss mit einem "return false;" die Eventbehandlung abbrechen.

    Gruß,

    Harlequin

    --
    <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
    1. Harlequin schrieb:

      Der innere Eventhandler muss mit einem "return false;" die Eventbehandlung abbrechen.

      Du meinst sowas?
       <a href='http://abc.de' target='_blank' onclick='return false;'>neues fenster</a><br>

      Das tut leider nicht, da dadurch dieser (innere) link überhaupt nicht zur Ausführung kommt, sondern nur noch der äußere. Es soll aber genau andersrum sein.

      Ideen?

      1. Yerf!

        Du meinst sowas?
        <a href='http://abc.de' target='_blank' onclick='return false;'>neues fenster</a><br>

        Jein. Vor dem return false müsste noch mehr rein, da return false auch die normale Linkfunktion unterbindet.

        Das tut leider nicht, da dadurch dieser (innere) link überhaupt nicht zur Ausführung kommt, sondern nur noch der äußere. Es soll aber genau andersrum sein.

        Hm, das verwundert mich jetzt, ich hätte erwartet das in deinem Beispiel gar nichts passiert, dann hätte man nur noch die gewünschte Funktionalität vor das return false packen müssen. Aber evtl. ist ja der Hinweis von plan_B zielfürend.

        Gruß,

        Harlequin

        --
        <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
        1. Vielen Dank. So geht es!

          Hier nochmal der Vollständigkeit halber das vollständige Script.
          Man muss also für die beiden inneren Links einen sog. EventListener installieren, der verhindert, dass nach dem Ausführen des inneren Links auch noch der äußere ausgeführt wird. Beide Links sind als Events zu verstehen. Näheres findet ihr hier: http://www.mediaevent.de/javascript/event_listener.html

          Danke - cyberhorst

          <html>
          <head>
          <script type="text/javascript">

          /**
          * verhindert, dass auch noch das Event vom Eltern-Element ausgeführt wird
          * siehe: http://www.phpforum.de/archiv_60540_onclick@event@verhindern_anzeigen.html
          */
          function stopEvent(e) {
            e=e || window.event;
            if(e && e.stopPropagation) {
           e.stopPropagation();
            } else if(typeof(e.cancelBubble)=="boolean") {
           e.cancelBubble=true;
            }
          }

          /**
          * ersetzt das klassische addEventListener, da dies vom IE nicht korrekt umgesetzt wird
          * siehe: http://www.mediaevent.de/javascript/event_listener.html
          * John Resig, erklärt bei quirksmode (http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html)
          */
          function addEvent( obj, type, fn ) {
             if (obj.addEventListener) {
                obj.addEventListener( type, fn, false );
             } else if (obj.attachEvent) {
                obj["e"+type+fn] = fn;
                obj[type+fn] = function() { obj"e"+type+fn; }
                obj.attachEvent( "on"+type, obj[type+fn] );
             }
          }

          function StopElementFromOverKlicking(id) {
            addEvent(document.getElementById(id),"click", stopEvent, false);
          }

          function load() {
           StopElementFromOverKlicking('link1');
           StopElementFromOverKlicking('link2');
          }
          </script>
          </head>

          <body onload="load();">

          <div onclick='location.href="http://xyz.de"' style='background:red;width:400px;height:400px;'>
             <a id='link1' href='http://abc.de' >gleiches fenster</a><br>
             <a id='link2' href='http://abc.de' target='_blank' >neues fenster</a><br>
          </div>

          </body>
          </html>

  2. Hallo,

    Oder gibt es eine andere Möglichkeiten dieses Verhalten abzustellen und NUR den einen Link auszuführen.

    du müsstest nur das Event bubblen verhindern. Je nach Browser macht das stopPropagation() bzw. cancelBubble().
    Beispiele findest du hier im Archiv mit den Stichworten.

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·