javascript - ändern - jquery replace tag




Was ist der beste Weg, um Links mit JS-Funktionen zu ersetzen? (6)

Ein Muster, das in einer der Web-Apps, die ich gerade bearbeite, auftaucht, ist, dass Links, die früher nur ein gewöhnlicher A-Tag-Link waren, jetzt ein Popup-Fenster mit der Frage "Bist du sicher?" bevor der Link geht. (Wenn der Benutzer abbricht, passiert nichts.)

Wir haben eine Lösung, die funktioniert, aber irgendwie sind wir ein Web-App-Shop ohne Javascript-Experten, also bleibt mir dieses krabbelnde Gefühl, als gäbe es einen besseren Weg, um den Job zu erledigen.

Also, JS-Experten, was ist der standardkonformste, browserübergreifende Weg, um dies zu erreichen?

(Für das Protokoll ist dies bereits eine Site, die JS benötigt, also keine Notwendigkeit, eine "Nicht-JS" -Version zu haben. Aber es muss in jedem einigermaßen modernen Browser funktionieren.)

(Auch für Bonuspunkte wäre es nett, wenn Leute mit JS ausgeschaltet wären, hätten die Links nicht funktioniert, anstatt das Bestätigungsfeld zu umgehen.)


Eine Klassenbindungsversion (keine Inline-Onclick-Attribute erforderlich): Verknüpfen Sie dieses externe <script> nach allen bestätigbaren Steuerelementen:

// dangerous - warnings on potentially harmful actions
// usage: add class="dangerous" to <a>, <input> or <button>
// Optionally add custom confirmation message to title attribute

function dangerous_bind() {
    var lists= [
        document.getElementsByTagName('input'),
        document.getElementsByTagName('button'),
        document.getElementsByTagName('a')
    ];
    for (var listi= lists.length; listi-->0;) { var els= lists[listi];
        for (var eli= els.length; eli-->0;) { var el= els[eli];
            if (array_contains(el.className.split(' '), 'dangerous'))
                el.onclick= dangerous_click;
        }
    }
}

function array_contains(a, x) {
    for (var i= a.length; i-->0;)
        if (a[i]==x) return true;
    return false;
}

function dangerous_click() {
    return confirm(this.title || 'Are you sure?');
}

dangerous_bind();

Dies ist ein wenig langatmig wegen der verbindlichen Arbeit an Submits / Buttons. Generell ist es zwar sinnvoll, "gefährliche" Optionen zu verwenden, aber Sie möchten lieber auf Schaltflächen als auf Links klicken. GET-Anfragen, die über Links ausgelöst werden, sollten eigentlich keinen aktiven Effekt haben.


In jQuery ist es so etwas wie:

$("a").click(function() {if(confirm('yadda yadda')) event.stopPropagation();});

Wenn ich verstehe, was jgreep erwähnt hat, würden Sie den Click-Handler nur an Links mit der richtigen Klasse binden, wenn Sie möchten, dass die Bestätigung nur auf einigen Links angezeigt wird. Sie können dies nur für Anker oder für jedes HTML-Element mit der Klasse tun.

$(".conf").click(function() {if(confirm('yadda yadda')) event.stopPropagation();});

Wenn Sie jQuery verwenden, tun Sie Folgendes:

jQuery(document).ready(
    jQuery("a").click(){
        //you'd place here your extra logic
        document.location.href = this.href;
    }
);

Unauffälliges Javascript

Die beste Vorgehensweise besteht darin, den Verknüpfungen Ereignishandlermethoden hinzuzufügen.

Die Funktion confirm () erzeugt das Dialogfeld, das Sie beschrieben haben, und gibt wahr oder falsch zurück, je nach Wahl des Benutzers.

Event-Handler-Methoden für Links haben ein spezielles Verhalten: Sie brechen die Link-Aktion ab, wenn sie false zurückgeben.

var link = document.getElementById('confirmToFollow');

link.onclick = function () {
    return confirm("Are you sure?");
};

Wenn Sie möchten, dass der Link JavaScript benötigt , muss der HTML-Code bearbeitet werden. Entferne den href:

<a href="#" id="confirmToFollow"...

Sie können das Verknüpfungsziel im Ereignishandler explizit festlegen:

var link = document.getElementById('confirmToFollow');

link.onclick = function () {
    if( confirm("Are you sure?") ) {
        window.location = "http://www..com/";
    }
    return false;
};

Wenn Sie möchten, dass dieselbe Methode für mehrere Links aufgerufen wird, können Sie eine nodeList der gewünschten Links erstellen und die Methode auf jede davon anwenden, während Sie die nodeList durchlaufen:

var allLinks = document.getElementsByTagName('a');
for (var i=0; i < allLinks.length; i++) {
    allLinks[i].onclick = function () {
        return confirm("Are you sure?");
    };
}

Es gibt weitere Permutationen derselben Idee hier, wie zum Beispiel die Verwendung eines Klassennamens, um zu bestimmen, welche Links auf die Methode hören werden, und um basierend auf einigen anderen Kriterien eine eindeutige Position zu übergeben. Sie sind sechs von eins, ein halbes Dutzend von einem anderen.

Alternative Ansätze (nicht geförderte Praktiken):

Eine entmutigte Vorgehensweise ist es, eine Methode über ein onclick-Attribut anzuhängen :

<a href="mypage.html" onclick="...

Eine weitere empfohlene Vorgehensweise besteht darin, das href-Attribut auf einen Funktionsaufruf zu setzen:

<a href="javascript: confirmLink() ...

Beachten Sie, dass diese entmutigten Praktiken alle funktionierende Lösungen sind.


<a href="http://..." onclick="return confirm('are you sure?')">text</a>





javascript