onclick elemente ausschliessen

[heinetz]

Hallo Forum,

das hier ist weniger eine konkrete Frage als eine Suche nach
Lösungsansätzen. Folgendes:

Ich definiere für einen realativ grossen <div>-Container einen
Event onclick:

rightsectionObj.onclick = function(){anzeigen();}

Das funktioniert auch, wie gewünscht. Clickt der User in den
Bereich, sorgt die Funktion "anzeigen" dafür, dass sich etwas
tut, in dem Fall etwas angezeigt wird. In dem Bereich gibt es
allerdings auch einige Links, die von der Seite wegführen.
Clickt der User nun auf einen dieser Links, klickt er eben aber
auch in den Bereich und damit wird die Funktion anzeigen()
ausgeführt, wovor er die Seite verlässt.

Die Verhaltensweise ist vollkommen korrekt und nachvollziehbar.
Allerings nicht sinnvoll und ich frage mich, ob es wohl einen
smarten Weg gibt, beim Click auf einen der Links das event
onclick für den Bereich abzufangen.

tausend Dank für Tipps und

beste gruesse,
heinetz

[Gunnar Bittersmann]

@@heinetz:

nuqneH

und ich frage mich, ob es wohl einen smarten Weg gibt, beim Click auf einen der Links das event onclick für den Bereich abzufangen.

In deinem anderen Thread hatte ich dich auf molilys JavaScript-Artikel hingewiesen. Lies dort über Event-Bubbling nach. Dann sollte es dir gelingen abzufragen, welches Element ursprünglich das "click"-Event auslöste.

Qapla'

[heinetz]

In deinem anderen Thread hatte ich dich auf molilys JavaScript-Artikel hingewiesen. Lies dort über Event-Bubbling nach. Dann sollte es dir gelingen abzufragen, welches Element ursprünglich das "click"-Event auslöste.

sehr informativ! danke für die schöne quelle!

besten abend,
heinetz

[Felix Riesterer]

Lieber heinetz,

Gunnar hat Dir ja schon sehr hilfreiche Links gegeben, wenngleich Anfänger damit ein mittleres bis großes Verständnisproblem, und wenn nicht Verständnis-, so doch ein Umsetzungsproblem haben.

Im Grunde musst Du in Deiner durch das onclick-Event aufgerufenen Funktion prüfen, auf welches Element der Klick selbst ausgeführt wurde. Dazu gibt es im Event je mach Browser eine passende Eigenschaft:

function clickEventHandler (e) {  
    var clickElement = false; // zunächst von Fehler ausgehen  
  
    if (!e && window.event) e = window.event; // für IE das Event-Objekt holen  
  
    if (e.srcElement) clickElement = e.srcElement; // IE  
    if (e.target) clickElement = e.target; // W3C DOM  
  
    alert("Angeklicktes Element: " + clickElement);  
}  
  
myDiv.onclick = clickEventHandler;

Wie man oben sehen kann, wird in W3C-DOM-kompatiblen Browsern bei einem Event ein Parameter (siehe Variable "e") mitgegeben, der eine Referenz auf das (in diesem Fall "click"-)Event enthält. Für IE muss man sich eine Referenz über das window-Objekt holen. Und dann gibt es im IE die Eigenschaft "srcElement", in W3C-DOM-kompatiblen Browsern dafür "target", um das tatsächlich angeklickte Element zu ermitteln.

Du musst nun nur prüfen, ob das tatsächlich angeklickte Element ein <a>-Element ist, um in diesem Falle die weitere Ausführung Deiner Funktion abzubrechen (return true;).

function anzeigen (e) {  
    var el;  
  
    if (!e && window.event) e = window.event; // IE  
  
    if (e.srcElement) el = e.srcElement; // IE  
    if (e.target) el = e.target; // W3C DOM  
  
    if (el && el.tagName && el.tagName.toLowerCase() == "a")  
        return true; // <a> has been clicked!  
  
    doSomethingElse();  
  
    return true;  
}  
  
/* WICHTIG!!! Event-Parameter mitgeben! */  
rightsectionObj.onclick = function (e) { anzeigen(e); };  
// oder eleganter:  
rightsectionObj.onclick = anzeigen;

Noch Fragen?

Liebe Grüße,

Felix Riesterer.

[Struppi]

function clickEventHandler (e) {

var clickElement = false; // zunächst von Fehler ausgehen

if (!e && window.event) e = window.event; // für IE das Event-Objekt holen

if (e.srcElement) clickElement = e.srcElement; // IE
    if (e.target) clickElement = e.target; // W3C DOM

alert("Angeklicktes Element: " + clickElement);
}

Das ist nicht falsch, aber umständlich und ich bezweifle, dass es für's Verständnis einfacher ist.

[code lang=javascript]var clickElement = e.target || e.srcElement;

Die eine Zeile sollte einfach und verständlich genug sein.  
  
Struppi.