em-pie
Aug 01, 2022, updated at Aug 16, 2022 (UTC)
view2755
view17
0
Goto Top

Beiträge öffnen sich nicht im neuen Tab (STRG + Klick)

GermansolvedQuestionTrashcanOff Topic
Hallo @Frank / zusammen,

mir ist es vor ein paar Tagen schon aufgefallen, hab aber gedacht, es läge an meinem Browser (Edge 103.0.1264.71 auf Windows 1021H2), was ich aber ausschließen kann:
Wenn ich auf der Hauptseite bin und bei gedrückter STRG-Taste einen Beitrag in einem neuen Tag öffnen will, klappt das nicht. der Link wird dann im selben Tab geöffnet
Links, die sich innerhalb von Beiträgen befinden, funktionieren indes.

Mit Google-Chrome (103.0.5060.134) im übrigen gleiches Problem.

Hast du eine Idee/ Lösung oder war das gewollt (es kann ja durchaus sinnvolle Szenarien geben)?

Gruß
em-pie
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 3512474398

Url: https://administrator.de/contentid/3512474398

Printed on: May 20, 2024 at 15:05 o'clock

17 Comments
Latest comment
Goto Top
Member: Visucius
Visucius Aug 01, 2022 updated at 10:12:33 (UTC)
Goto Top
Safari (Version 15.6 (17613.3.9.1.5) ebenso ... und evtl. auch interessant:

Bin ich hier im Beitrag und klicke mit CMD+Klick oben links auf den Administrator-Schriftzug, geht ein weiteres Fenster mit der Homepage auf.
Member: Lochkartenstanzer
Lochkartenstanzer Aug 01, 2022 at 10:50:26 (UTC)
Goto Top
Mit FF 102.0.1 unter Ubuntu jammy (snap-version) genauso.

Wenn man in der Liste https://administrator.de/latest/ einen Beitrag anklickt, geht kein neuer TAB auf, sondern es wird "recycled".

lks
Mitglied: 3479126418
3479126418 Aug 01, 2022 updated at 11:08:56 (UTC)
Goto Top
Der Grund: Der Klick wird dort von einem JavaScript abgefangen und der Default-Handler verhindert:

screenshot
heart1
Member: Trommel
Trommel Aug 01, 2022 at 11:26:13 (UTC)
Goto Top
Mausrad-Klick geht face-smile

Trommel
Member: Spirit-of-Eli
Spirit-of-Eli Aug 01, 2022 at 13:33:38 (UTC)
Goto Top
bei mir mit dem Vivaldi geht es auch noch ganz normal.
Member: Frank
Frank Aug 01, 2022 at 21:23:07 (UTC)
Goto Top
Zitat von @bangalore:

Der Grund: Der Klick wird dort von einem JavaScript abgefangen und der Default-Handler verhindert:

Genauso ist es. Die "Tags" werden per JS abgefragt und dann aufgerufen. Das hat mehrere Vorteile:

  • Das ganze Element hat einen einzigen Link per "href". Dadurch wird der Aufbau (HTML und CSS, GRID) deutlich einfacher und schneller. Man muss nicht mit mehreren Links (hrefs) arbeiten. Es entstehen dadurch auch keine "Lücken" im Link (Fläche, die nicht anklickbar sind) und das Element ist durchgehend klickbar.
  • SEO: Google sieht die ganzen Tag-Links nicht und meckert sie auch nicht an. Gerade bei den Listen wären das sonst sehr viele Links.

Das mit dem String+Link war mir gar nicht bewusst. Ich habe das in den letzten 30 Jahren noch nie genutzt.

Leider weiß ich aktuell nicht, wie ich das mit dem "STRG" lösen könnte. Vielleicht kann man es per JS abfangen und dann ein neues Fenster öffnen. Das muss ich erst noch rausfinden.

Gruß
Frank
heart1
Mitglied: 3479126418
Solution 3479126418 Aug 02, 2022 updated at 05:28:31 (UTC)
Goto Top
Leider weiß ich aktuell nicht, wie ich das mit dem "STRG" lösen könnte. Vielleicht kann man es per JS abfangen und dann ein neues Fenster öffnen. Das muss ich erst noch rausfinden.

$("#mylink").click(function(evt){  
    evt.preventDefault();
    if (evt.ctrlKey){
        window.open(evt.target.href,"_blank");  
    }else{
        // ....
    }
});
Member: Frank
Frank Aug 15, 2022 updated at 12:49:21 (UTC)
Goto Top
@3479126418:

Ich dachte am Anfang auch, dass es so einfach ist. Aber das funktioniert nicht. Der "event.ctrlKey" ist bei mir immer leer. Getestet habe ich das jetzt bisher unter macOS (wenn, dann muss es sowieso OS unabhängig funktionieren). Da ich eine Klasse und keine ID abfrage (.element-main) mache ich ein Schleife und in dieser ist der "event.ctrlKey" irgendwie leer.

const openContent = document.querySelectorAll('.element-main');  
for (const content of openContent) {
    content.addEventListener("click", function (event) {  
        event.preventDefault();

        if (event.ctrlKey) {
            console.log("strg key works: " + event.keys());  
        } else {
            console.log("strg key does not work");  
        }

        let target = event.target;
        if (target.className === "content-tag") {  
            window.location.href = target.dataset.tagUrl;
        } else {
            window.location.href = content.getAttribute("href");  
        }
    })
}

Jedes Element besteht aus einem href:

<a href="url1.html" class="element-main element-main-grid">Element #1  
<span data-tag-url="/latest/?tag=offtopic" class="content-tag">#offtopic</span>  
</a>

<a href="url2.html" class="element-main element-main-grid">Element #2  
<span data-tag-url="/latest/?tag=microsoft" class="content-tag">#microsoft</span>  
</a>

Vielleicht findet es jemand schneller als ich oder schreibt eine elegantere Methode face-smile
Ziel ist es in das erste "href" keine zusätzlichen "hrefs" für Links einzubauen (Tag, User, etc). Trotzdem sollen es Links zu Tags und Userprofil geben. Daher rufe ich das per JS ab. Ziel ist es kein jQuery dafür zu nutzen.

Challenge started face-wink

Gruß
Frank
Mitglied: 3479126418
3479126418 Aug 15, 2022 updated at 12:40:09 (UTC)
Goto Top
Aber das funktioniert nicht. Der "event.ctrlKey" ist bei mir immer leer.
Verständlich, weil diese Property nur im jQuery Event-Object definiert ist
Member: Frank
Frank Aug 15, 2022 updated at 12:47:47 (UTC)
Goto Top
Zitat von @3479126418:

Aber das funktioniert nicht. Der "event.ctrlKey" ist bei mir immer leer.
Verständlich, weil diese Property nur im jQuery Event-Object definiert ist

Nö eigentlich sollte es in JS addEventListener auch funktionieren: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ctrlKey

oder https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
Mitglied: 3479126418
Solution 3479126418 Aug 15, 2022 updated at 13:01:55 (UTC)
Goto Top
Uuups stimmt, aber hier klappt das im Test problemlos
https://jsfiddle.net/puea1qyk/1/

CTRL gedrückt

screenshot

Ohne CTRL

screenshot
Member: Frank
Frank Aug 15, 2022 updated at 13:16:46 (UTC)
Goto Top
Ja, unter Windows funktioniert es, unter macOS leider nicht. Bisher hatte ich es nur unter macOS getestet (meine DEV-Umgebung).

Unter macOS wäre es die Taste "cmd" oder "command", die ein extra Tab bei einem Link öffnet. Dieser wird in der Regel als "meta" in "evt.key" erkannt. Hier aber nicht.

Ich denke dafür braucht man den "addEventListener('keydown')" Diesen aber mit dem addEventListener("click") zu kombinieren, ist mir leider noch nicht gelungen.

Egentlich sollte es laut: "MouseEvent.ctrlKey" https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey funktionieren.

Note: On Macintosh keyboards, this key is the control key.

Das ist aber nicht so, es funktioniert noch nicht mal im eigenen "MouseEvent" Beispiel von Mozilla.

Noch eine Idee?
Mitglied: 3479126418
3479126418 Aug 15, 2022 at 13:19:23 (UTC)
Goto Top
k.A. mangels MAC kein Test möglich. Immer diese Apple Extra-Würste face-sad.
Member: Frank
Solution Frank Aug 15, 2022 at 13:46:10 (UTC)
Goto Top
Da es unter Linux und Windows funktioniert habe ich es mal eingebaut. Der Strg+Link funktioniert damit wieder in unseren Übersicht auch für die Tags. Leider noch nicht unter macOS. Wer da noch eine Idee hat, kann das hier gerne posten.

Hier das aktuelle js dazuz:

document.querySelectorAll('.element-main').forEach(function (el) {  
    el.addEventListener("click", function (event) {  
        event.preventDefault();
        let target = event.target;
        let url = null;
        if (target.className === "content-tag") {  
            url = target.dataset.tagUrl;
        } else {
            url = el.getAttribute("href");  
        }
        if (event.ctrlKey) {
            window.open(url,"_blank");  
        } else {
            window.location.href = url;
        }
    });
});

Danke an @3479126418, du stehst jetzt mit im js-Quelltext drin. Es soll sich ja lohnen uns zu helfen face-wink

Gruß
Frank
Mitglied: 3479126418
Solution 3479126418 Aug 15, 2022 updated at 14:59:32 (UTC)
Goto Top
face-smile Danke, wäre aber nicht nötig gewesen is ja nix besonderes. Also bei einem Kollegen auf dem MAC klappt das hier ebenfalls problemlos mit der cmd Taste und der Property metaKey
https://jsfiddle.net/dxq5ytzb/

bildschirmfoto 2022-08-15 um 16.55.42
Member: Frank
Solution Frank Aug 16, 2022 updated at 12:11:10 (UTC)
Goto Top
Zitat von @3479126418:

face-smile Danke, wäre aber nicht nötig gewesen is ja nix besonderes. Also bei einem Kollegen auf dem MAC klappt das hier ebenfalls problemlos mit der cmd Taste und der Property metaKey
https://jsfiddle.net/dxq5ytzb/

bildschirmfoto 2022-08-15 um 16.55.42

Naja, doch es spart mir Zeit selbst nachzuschauen und es auszuprobieren. Das mit dem "metaKey" wusste ich z.B. noch gar nicht. Ich habe es jetzt eingebaut, getestet und es funktioniert auf allen Systemen (Windows, Mac und Linux).

Danke, der Beitrag kann aus meiner Sicht als gelöst markiert werden face-smile

Hier der js-Code für die Nachwelt:

document.querySelectorAll('.element-main').forEach(function (el) {  
    el.addEventListener("click", function (event) {  
        event.preventDefault();
        let target = event.target;
        let url = null;
        if (target.className === "content-tag") {  
            url = target.dataset.tagUrl;
        } else {
            url = el.getAttribute("href");  
        }
        if (event.ctrlKey || event.metaKey) {
            window.open(url, "_blank");  
        } else {
            window.location.href = url;
        }
    });
});

Challenge completed face-smile

Gruß
Frank
Member: em-pie
em-pie Aug 16, 2022 at 12:14:49 (UTC)
Goto Top
Sehr schön.

Danke fürs gemeinsame Umsetzen.
Dann mache ich hier mal "dicht" face-smile
GermansolvedQuestionTrashcanOff Topic
Hotly discussed
fireflyWindows zero-day vulnerability CVE-2024-30051fireflyhempelVMware Desktop Hypervisor Pro Apps now available free for personal usehempel