mittlerer Klick (neue Tabs) und Javascript-Links

Question

Ich bin für eine Website bei der Arbeit verantwortlich und habe vor kurzem Ajax-Anfragen hinzugefügt, um sie schneller und reaktionsschneller zu machen. Aber es hat ein Problem aufgeworfen.

Auf meinen Seiten gibt es auf der linken Seite eine Index-Tabelle, wie ein Menü. Sobald man darauf klickt, wird eine Anfrage gestellt, die den Rest der Seite füllt. Sie können jederzeit auf ein anderes Element des Indexes klicken, um eine andere Seite zu laden.

Vor dem Hinzufügen von Javascript war es möglich, für jedes Element des Indexes einen mittleren Klick zu machen (neue Registerkarten zu öffnen), was es ermöglichte, andere Seiten zu laden, während ich mit einer von ihnen arbeitete. Aber seit ich alle Links zu Ajax-Anfragen geändert habe, führen sie jetzt Javascript aus, anstatt echte Links zu sein. Sie öffnen also nur noch leere Registerkarten, wenn ich sie anklicke.

Gibt es eine Möglichkeit, beide Funktionalitäten zu kombinieren: Links, die Javascript abfeuern, wenn sie mit der linken Maustaste angeklickt werden, oder neue Registerkarten, wenn sie in der Mitte angeklickt werden? Muss es ein hässliches Javascript sein, das alle Klicks abfängt und sie entsprechend behandelt?

Gracias.

Answer 1

Ja. Stattdessen:

<a href="javascript:code">...</a>

Tun Sie dies:

<a href="http://stackoverflow.com/non/ajax/display/page" id="thisLink">...</a>

Und dann in Ihrem JS, haken Sie den Link über seine ID, um den AJAX-Aufruf zu tun. Denken Sie daran, dass Sie das Klick-Ereignis aus Blasenbildung zu stoppen müssen. Die meisten Frameworks haben einen Event-Killer eingebaut, den Sie aufrufen können (schauen Sie sich einfach die Event-Klasse an).

Hier ist die Ereignisbehandlung und Ereignis-Killer in Jquery:

$("#thisLink").click(function(ev, ob) {
    alert("thisLink was clicked");
    ev.stopPropagation();
});

Natürlich kann man noch viel schlauer sein, wenn man mit solchen Dingen jongliert, aber ich denke, es ist wichtig zu betonen, dass diese Methode also viel sauberer als mit onclick Attribute.

Behalten Sie Ihr JS im JS!

Answer 2

Ja, Sie müssen progressive Verbesserung und unauffälliges Javascript nachschlagen und Ihre Website so programmieren, dass sie zunächst ohne aktiviertes Javascript funktioniert, und dann die Javascripts-Funktionen hinzufügen, nachdem Sie die grundlegende Website eingerichtet haben.

Answer 3

Ich mochte Oli's Ansatz, aber es nicht von linken und mittleren Klicks zu unterscheiden. Überprüfung der "welche" Feld auf die eventArgs wird Ihnen wissen.

$(".detailLink").click(function (ev, ob) {
    //ev.which == 1 == left
    //ev.which == 2 == middle
    if (ev.which == 1) {
        //do ajaxy stuff

        return false; //tells browser to stop processing the event
    }
    //else just let it go on its merry way and open the new tab.
});

Answer 4

Es würde einige Tests erfordern, aber ich glaube, dass die meisten Browser den Click-Handler nicht ausführen, wenn man auf sie klickt, was bedeutet, dass nur der Link verwendet wird.

Beachten Sie jedoch, dass Ihre Handler-Funktion false zurückgeben muss, um sicherzustellen, dass diese Links beim normalen Klicken nicht verwendet werden.

EDIT: Ich dachte, das könnte ein Beispiel gebrauchen:

<a href="http://stackoverflow.com/Whatever/Wherever.htm" onclick="handler(); return false;" />

Answer 5

<a href="http://stackoverflow.com/original/url" onclick="return !doSomething();">link text</a>

Weitere Informationen und ausführliche Erläuterungen finden Sie unter meine Antwort in einem anderen Beitrag .