Klick auf Link abfangen und erst Funktion ausführen

F

FunkyMonkey

Mitglied
Hallo

wie kann man einen Klick auf einen Link abfangen, ohne das der Link speziell gekennzeichnet wird? Es geht um eine Website mit vielen Links, und es soll nicht in jedem A-Tag ein onClick definiert werden.

Dem Ziel soll nicht sofort gefolgt werden, sondern es soll erst eine Funktion aufgerufen werden. Diese schickt den Browser dann an das neue Ziel.

Ich wüsste wohl wie man den Click-Event global abfragt, aber wie verhindert man das der Browser sofort dem Ziel folgt?
 
das Event abbrechen sollte mit false gehen.
Nur dann geht nichtsmehr was ja auch nicht wirklich Sinn macht.


onclick = function() {
return false;
}
 
Hi,

willst du alle Links des Dokumentes so manipulieren, dass sie verzögert auf einen Klick reagieren?
In einem solchen Fall könntest du im onload-Event alle Links des Dokuments durchlaufen und automatisch mit einem onclick-Event versehen, in dem die gewünschte Funktion aufgerufen wird.

Willst du allerdings nur vereinzelte Links derartig behandeln, musst du dir eine andere Vorgehensweise überlegen. Eventuell alle Links mit einer ID versehen und diese in einem Array ablegen. Im onload-Event durchläufst du das ID-Feld, ermittelst das zugehörige Linkelement und weist die gewünschte Funktion zu.

Ciao
Quaese
 
Alle Links sollen abgefangen werden. Die auszuführende Operation kann im schlimmsten Fall gut und gerne mal eine Sekunde dauern. In jedem Fall muss sie aber zu Ende gebracht werden, bevor der Browser die Seite verlässt.

Wenn ich jedem Link einen onClick Event verpasse, wird dieser onClick Event auf jeden Fall ausgeführt oder folgt der Browser eventuell schneller dem Ziel, noch bevor die hinter onClick stehende Aktion vollständig ausgeführt wurde?
 
Habs ausprobiert: Der Browser folgt sofort dem Ziel, die Funktion im onClick-Event wird mitten drin abgebrochen.

Ist es möglich das Ziel eines Links beim Anklicken dynamisch zu verändern?
 
Hi,

ich weiss ja nicht, wie genau dein Dokument aussieht und was genau dein Vorhaben ist. Du kannst aber beispielsweise alle Links im onload-Event durchlaufen und bearbeiten. Dabei werden sie dahingehend manipuliert, dass bereits vorhandene Funktionen im onclick-Event wie gewohnt ausgeführt werden. Die Weiterleitung auf die Seite aus dem href-Attribut wird zeitverzögert (setTimeout) ausgeführt.

Beispiel:
Code: 
<html>
<head>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function onAfterClick(objLink){
  if(confirm("Wollen Sie '" + objLink.href + "' besuchen?")){
    self.location = objLink.href;
  }
}

function initLinks(){
  var arrLinks = document.getElementsByTagName("a");
  // Alle Links durchlaufen
  for(var i=0; i<arrLinks.length; i++){
    // Falls bereits eine Funktion im onclick-Event vorhanden ist
    if(typeof arrLinks[i].onclick == "function")
      // Alte onclick-Funktion "speichern"
      arrLinks[i].old_onclick = arrLinks[i].onclick;

    // Link um onclick erweitern
    arrLinks[i].onclick = function(){
      // Alte onclick-Funktion aufrufen
      if(typeof this.old_onclick == "function")
        this.old_onclick();

      var objThis = this;
      // Weitere Funktion verzögert aufrufen
      window.setTimeout( function(){onAfterClick(objThis);} , 2000);

      return false;
    }
  }
}

window.onload = function(){
  initLinks();
}
//-->
</script>
</head>
<body>
<button onclick="derTest();">derTest</button>
<a href="http://www.sueddeutsche.de" onclick="alert('Ich war schon da!');">www.sueddeutsche.de</a>
<a href="http://www.tutorials.de">www.tutorials.de</a>
<a href="http://www.google.de">www.google.de</a>
</body>
</html>
Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese
 
Danke Euch für die vielen Infos. Ich habe vieles ausprobiert und bin nun soweit, das wenn ich auf einen beliebigen Link klicke das href-ziel nicht verfolgt wird. Ein im Link notierter onclick-Event wird aber ausgeführt.

Eigentlich sollte es nun auch funktionieren, das der Browser dem Ziel folgt (ich weis, das klingt gerade alles etwas sinnfrei). Aber es tut sich nichts. So schauts aus:

Code: 
<a id="x" href="seite2.php" onClick="alert('inline_onclick');">seite2.php</a><br>
	<a id="y" href="seite2.php" onClick="alert('noch ein link mit inline_onclick');">testlink2</a> <a id="z" href="seite2.php" onClick="alert('test 3');">testlink3</a>
<script type="text/javascript">
	<!--
function addEvent(eo, eventType, function_name){
	if (eo.addEventListener) {
		eo.addEventListener(eventType, function_name, false);
	} else if (eo.attachEvent) {
		eo.attachEvent("on"+eventType, function_name);
	}
}
function linkHrefAction() {
		var href = this.href + '?x=y';
		alert('ab gehts: ' + href);
		redirect();
	}
	
	function redirect(){
		alert ('versuche weiterleitung...');
		self.href = 'seite2.php';
	}
	
	document.getElementById("x").onmouseover = function() {
		var original_onclick = this.onclick;
		addEvent(this, 'click', original_onclick);
		if(this.href && this.href != '#' && this.href != 'javascript:;') {
			addEvent(this, 'click', linkHrefAction);
		}
		this.onclick = new Function('return false;');
	}
	
	document.getElementById("y").onmouseover = function() {
		var original_onclick = this.onclick;
		addEvent(this, 'click', original_onclick);
		if(this.href && this.href != '#' && this.href != 'javascript:;') {
			addEvent(this, 'click', linkHrefAction);
		}
		this.onclick = new Function('return false;');
	}
	
	document.getElementById("z").onmouseover = function() {
		var original_onclick = this.onclick;
		addEvent(this, 'click', original_onclick);
		if(this.href && this.href != '#' && this.href != 'javascript:;') {
			addEvent(this, 'click', linkHrefAction);
		}
		this.onclick = new Function('return false;');
	}
	//-->
</script>

der code selbst wird noch optimiert, ich will natürlich nicht für jeden einzelnen Link so einen Block anlegen.

Das eizige was jetzt noch nicht geht ist das der Browser dem Ziel folgt. Im alert erscheint der richtige href-Inhalt. Wenn ich ein document.href außerhalb eines Funktionskontextes verwende geht es. Nur scheinar reagiert JavaScript hier allergisch auf eine Weiterleitung aus einer Funktion heraus.

Hat jemand eine Idee was man da tun kann? Getestet im Firefox...

Danke nochmal!

Gruß
FunkyMonkey
 
Für alle die ebenfalls über Suchmaschinen hierher finden, hier meine zeitlich etwas "aktuellere" Lösung (jQuery vorausgesetzt):
Code: 
	$('a').bind('click', function(){
		var link = this.href;
		$('#content').fadeOut(function () { //NUR EINE BEISPIELFUNKTION
			self.location = link;
		})
		return false;
	});
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück