Quelle est la meilleure façon de remplacer les liens avec JS fonctions?

Un patron qui a commencé à montrer beaucoup dans l'une des applications web, je travaille sont des liens qui se contentaient de faire régulièrement une balise de lien maintenant besoin d'une boîte de pop-up demandant: "êtes-vous sûr?" avant que le lien va aller. (Si l'utilisateur clique sur annuler, rien ne se passe.)

Nous avons une solution qui fonctionne, mais de toute façon nous sommes une web app shop sans Javascript expert, donc je suis parti avec cette rampant se sentir comme il ya une meilleure façon d'obtenir le travail fait.

Donc, JS experts, ce qui est le plus conforme aux normes, de la croix-navigateur de façon à obtenir ce fait?

(Pour mémoire, c'est déjà un site qui nécessite JS, donc pas besoin d'avoir un "non-JS" version. Mais, il n'a pas besoin de travailler dans n'importe quel et tous raisonnablement les navigateurs modernes.)

(Aussi, pour les points de bonus, ce serait bien si les gens avec JS désactivé n'ai pas les liens fonctionnent, plutôt que de contourner la boîte de confirmation.)

InformationsquelleAutor Electrons_Ahoy | 2008-11-05

javascript

13

Javascript Discret

La meilleure pratique consiste à ajouter des méthodes de gestionnaire d'événement pour les liens.

La confirmer() fonction produit de la boîte de dialogue que vous avez décrit, et renvoie true ou false selon le choix de l'utilisateur.

Méthodes de gestionnaire d'événement sur les liens ont un comportement spécial, qui est qu'ils tuent le lien de l'action, si elle retourne false.
```
var link = document.getElementById('confirmToFollow');

link.onclick = function () {
    return confirm("Are you sure?");
};
```
Si vous voulez le lien pour nécessite javascript, le code HTML doit être édité. Retirez le href:
```
<a href="#" id="confirmToFollow"...
```
Vous pouvez définir explicitement le lien de destination dans le gestionnaire d'événement:
```
var link = document.getElementById('confirmToFollow');

link.onclick = function () {
    if( confirm("Are you sure?") ) {
        window.location = "http://www.stackoverflow.com/";
    }
    return false;
};
```
Si vous souhaitez utiliser la même méthode appelée sur plusieurs liens, vous pouvez acquérir une nodeList des liens que vous voulez, et d'appliquer la méthode à chaque en boucle les nodeList:
```
var allLinks = document.getElementsByTagName('a');
for (var i=0; i < allLinks.length; i++) {
    allLinks[i].onclick = function () {
        return confirm("Are you sure?");
    };
}
```
Il y a d'autres permutations de la même idée ici, comme l'utilisation d'un nom de classe pour déterminer les liens pour écouter de la méthode, et de passer à un emplacement unique à chacun en fonction de certains critères. Ils sont six, un, demi-douzaine de l'autre.

D'autres Approches (ne pas encourager les pratiques):

Un décourager la pratique est de fixer une méthode via un attribut onclick:
```
<a href="mypage.html" onclick="...
```
Un autre décourager la pratique est de définir la attribut href à un appel de la fonction:
```
<a href="javascript: confirmLink() ...
```
Noter que ces décourager les pratiques sont toutes les solutions de travail.
- Veuillez expliquer pourquoi <a href="mypage.html" onclick="... est découragé. De telles déclarations besoin de raisons ci-joint.
- Veuillez remplacer href="#" avec href="" qui ne saute pas en haut de la page quand il n'y a pas JS soutien, de la JS gestionnaire retourne vrai, mais reste sur la même page.
InformationsquelleAutor keparo
7

Voici comment nous l'avons fait:
```
<a href="#" onClick="goThere(); return false;">Go to new page</a>`

function goThere() 
{ 
   if( confirm("Are you sure?") ) 
    { 
       window.location.href="newPage.aspx"; 
    } 
}
```
(EDIT: Code reformaté pour éviter de défilement horizontale)
- Rien de mal à cela. De ne pas être pris dans la complexité du JavaScript ensemble complet de fonctionnalités si vous n'avez pas à.
InformationsquelleAutor Electrons_Ahoy
3
```
<a href="http://..." onclick="return confirm('are you sure?')">text</a>
```
- Si le JS est désactivé, qu'il faut aller directement sur le lien, sans le confirmer. Le désir était pour que le lien soit désactivé si JS est désactivé.
- L'utilisation d'un attribut onclick est découragé.
- Par qui? Pour quelle raison?
InformationsquelleAutor Diodeus - James MacFarlane

Si vous utilisez jQuery, vous feriez:

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

InformationsquelleAutor Esteban Küber

2

En jquery c'est quelque chose comme:
```
$("a").click(function() {if(confirm('yadda yadda')) event.stopPropagation();});
```
Si je comprends ce que jgreep mentionné, si vous voulez seulement le confirmer à apparaître sur quelques liens, vous permettrait de lier le gestionnaire de clic uniquement aux liens avec la bonne classe. Vous pouvez faire cela seulement pour les ancres ou pour n'importe quel élément html qui a la classe.
```
$(".conf").click(function() {if(confirm('yadda yadda')) event.stopPropagation();});
```
- Si vous ne voulez pas affecter l'intégralité du document, vous pouvez afficher la sélection d'une classe.
InformationsquelleAutor Josh

Une classe de liaison de la version (pas de nécessité pour les attributs onclick): lien externe < script> après tout confirmable contrôles:

//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();

C'est un peu de longue haleine en raison de la liaison de travail sur les soumet/boutons. En général, cependant, il est logique d'avoir "dangereuses", les options que vous souhaitez confirmer sur des boutons plutôt que des liens. OBTENEZ de demandes de tirés par les liens ne devrait pas vraiment d'effet activé.

InformationsquelleAutor bobince

var links = document.getElementsByTagName('A');

for (var i = 0; i < links.length; i++)
{ 
    links[i].onclick = function ()
    {       
       return Confirm("Are you sure?");
    }
}

Cela vaut le message à tous les liens, cependant il est un peu plus difficile de faire les liens pas sans javascript automatiquement (en fait son impossible).

InformationsquelleAutor FlySwat

1

Prendre un coup d'oeil à Quel est le meilleur moyen d'ouvrir une nouvelle fenêtre de navigateur. Vous pouvez faire quelque chose de similaire, mais jeter la confirmation avant l'ouverture d'une nouvelle fenêtre.

InformationsquelleAutor Kon

Vous devez vous connecter pour publier un commentaire.