JavaScript implementiert das Drücken der Strg-Taste zum Öffnen einer neuen Seite_Javascript-Fähigkeiten

(Anmerkung des Übersetzers: Dieser Artikel löst das Problem der Verwendung von JS zum Öffnen einer neuen Seite beim Drücken der Strg-Taste)

In der vereinfachten HTML5-Spezifikation dürfen mehrere DIVs und/oder andere Elemente auf Blockebene in das A-Tag aufgenommen werden. Solange das Blockelement mit dem umschlossen ist, können Sie das Problem lösen Problem bei der Verwendung von JavaScript zum Abhören und Aufrufen von window.location, um die Seitensprung-(Umleitungs-)Funktion zu implementieren.

Aber es gibt Situationen, in denen diese Verpackungsform der Verwendung von -Tags nicht gut funktioniert – zum Beispiel gibt es einige -Tags in einem bestimmten Blockelement (Block). Springen Sie nur zu einer bestimmten Adresse, wenn Sie auf andere Teile des übergeordneten Elements außer klicken.

Natürlich können unsere Bedürfnisse auch mit einem einfachen Zuhörer wie dem folgenden erreicht werden:

Code kopieren Der Code lautet wie folgt:

someElement.addEventListener('click', function(e) {
// Die URL-Adresse kann beliebig sein, Sie können aber auch andere Codes zur Angabe verwenden.
// Hier wird das DOM-Attribut „data-src“ des Elements verwendet (Attribut)
​ window.location = someElement.get('data-url');
});

…Aber das führt manchmal zu einer schlechten Benutzererfahrung. Wenn Sie die STRG-Taste (Befehlstaste auf dem Mac) gedrückt halten und mit der Maus klicken, wird der Link im selben (Tab-)Fenster geöffnet. Da Sie wissen, dass es dieses Problem gibt, müssen Sie darüber nachgedacht haben, wie Sie es lösen können. Beeilen Sie sich und nehmen Sie sich etwas Zeit, um Ihren Listener zu reparieren

Code kopieren Der Code lautet wie folgt:

someElement.addEventListener('click', function(e) {
// URL abrufen
var url = someElement.get('data-url');
// Bestimmen, ob die STRG-Taste gedrückt wird
If(e.metaKey || e.ctrlKey || e.button === 1) {
          window.open(url);
} sonst {
          window.location = url;
}
});

Der ursprüngliche Autor hat diese Funktion auf der Website http://davidwalsh.name/ implementiert. Sie sollten dies auch berücksichtigen, wenn Sie window.location für die Seitenumleitung verwenden. Dies ist eine kleine Codeverbesserung, aber eine sehr wichtige Verbesserung der Benutzerfreundlichkeit!