Comment puis-je désactiver HREF si onclick est exécuté?

95

J'ai une ancre avec les deux HREF et les ONCLICKattributs définis. Si vous avez cliqué et que Javascript est activé, je veux qu'il s'exécute et ignore uniquement . De même, si Javascript est désactivé ou non pris en charge, je veux qu'il suive l' URL et l'ignore . Voici un exemple de ce que je fais, qui exécuterait le JS et suivrait le lien simultanément (généralement le JS est exécuté, puis la page change):ONCLICKHREFHREFONCLICK

<A HREF="http://example.com/no-js-login" ONCLICK="yes_js_login()">Log in</A>

quelle est la meilleure façon de procéder?

J'espère une réponse Javascript, mais j'accepterai n'importe quelle méthode tant qu'elle fonctionne, surtout si cela peut être fait avec PHP. J'ai déjà lu " un lien href exécute et redirige la page avant que la fonction javascript onclick ne puisse terminer ", mais cela ne fait que retarder HREF, mais ne le désactive pas complètement. Je recherche aussi quelque chose de beaucoup plus simple.

Supuhstar
la source
4
J'utiliserais pour ancrer un avec un href et un sans. Sur le chargement de la page, vérifiez si javascript est activé, si elle affiche l'ancre correcte sinon affichez l'autre.
ewein
1
@ewein Pourquoi? Cela ressemble à beaucoup de balisage pour une fonctionnalité simple.
Supuhstar

Réponses:

58

Vous pouvez utiliser la première solution non modifiée, si vous mettez return en premier dans l' onclickattribut:

<a href="https://example.com/no-js-login" onclick="return yes_js_login();">Log in</a>

yes_js_login = function() {
     // Your code here
     return false;
}

Exemple: https://jsfiddle.net/FXkgV/289/

elproduc3r
la source
1
J'aime à quel point c'est propre! Cependant, la solution acceptée me donne plus de contrôle sur le fait de savoir si le HREF est ignoré
Supuhstar
Au cours des deux dernières années, j'ai changé d'avis; c'est une meilleure solution
Supuhstar
Comme c'est sain!
DrunkDevKek
Mais cela ne fonctionne pas avec JSX react. Est-ce que ça va marcher?
Coder
1
cela a permis de gagner beaucoup de temps.
Mark Lozano le
61
    yes_js_login = function() {
         // Your code here
         return false;
    }

Si vous retournez false, cela devrait empêcher l'action par défaut (aller à href).

Modifier: Désolé, cela ne semble pas fonctionner, vous pouvez effectuer les opérations suivantes à la place:

<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>
Chris Bier
la source
1
La réponse modifiée ne répond pas à la question, car elle supprime le lien réel.
Itai Bar-Haim
12
ou utiliser onclick="return yes_js_login();"avec yes_js_loginretourfalse
Uwe Kleine-König
1
@cgogolin voyez ma réponse.
Gabe Rogan
pour tous ceux qui sont toujours coincés, peut ajouter cette ligneevent.stopImmediatePropagation()
didxga
33

Désactivez simplement le comportement par défaut du navigateur en utilisant preventDefaultet transmettez le eventdans votre HTML.

<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>

yes_js_login = function(e) {
  e.preventDefault();
}
Buksy
la source
1
return false n'a pas fonctionné dans le polymère ... la solution ci-dessus a fonctionné ... Merci
Paras Sachapara
16
<a href="http://www.google.com" class="ignore-click">Test</a>

avec jQuery:

<script>
    $(".ignore-click").click(function(){
        return false;
    })
</script>

avec JavaScript

<script>
        for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
            document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
                event.preventDefault();
                return false;
            });
        }
</script>

Vous attribuez une classe .ignore-clickà autant d'éléments que vous aimez et les clics sur ces éléments seront ignorés

Andrew
la source
C'est une excellente solution! Je l'ai utilisé pour les boutons que j'ai qui, lorsque cliqué, une pseudo classe .btn-loadingest ajoutée au lien cliqué, puis en cas de succès, une coche (en cas d'erreur un X) remplace l'animation de chargement. Je ne veux pas que le bouton puisse être cliqué à nouveau dans certains cas (pour le succès et l'erreur), en utilisant cela, je peux simplement $(elemnent).addClass('disabled')et facilement obtenir la fonctionnalité que je recherchais d'une manière élégante!
Matthew Mathieson
14

Vous pouvez utiliser ce code simple:

<a href="" onclick="return false;">add new action</a><br>
mishanon
la source
5

C'est plus simple si vous passez un paramètre d'événement comme celui-ci:

<a href="#" onclick="yes_js_login(event);">link</a>
function yes_js_login(e) {
    e.stopImmediatePropagation();
}
Trigon219
la source
1
Cela ne fonctionne pas pour moi. Je dois utiliser e.preventDefault ()
Milan Simek
2

Cela pourrait aider. Aucun JQuery nécessaire

<a href="../some-relative-link/file" 
onclick="this.href = 'https://docs.google.com/viewer?url='+this.href; this.onclick = '';" 
target="_blank">

Ce code effectue les opérations suivantes: Transmettez le lien relatif à Google Docs Viewer

  1. Obtenez la version complète du lien de l'ancre en this.href
  2. ouvrez le lien dans la nouvelle fenêtre.

Donc, dans votre cas, cela pourrait fonctionner:

<a href="../some-relative-link/file" 
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); " 
target="_blank">
Marlo
la source
1

J'ai résolu une situation où j'avais besoin d'un modèle pour l'élément qui gérerait alternativement une URL régulière ou un appel javascript, où la fonction js a besoin d'une référence à l'élément appelant. En javascript, "this" fonctionne comme une auto-référence uniquement dans le contexte d'un élément de formulaire, par exemple un bouton. Je ne voulais pas de bouton, juste l'apparence d'un lien régulier.

Exemples:

<a onclick="http://blahblah" href="http://blahblah" target="_blank">A regular link</a>
<a onclick="javascript:myFunc($(this));return false" href="javascript:myFunc($(this));"  target="_blank">javascript with self reference</a>

Les attributs href et onClick ont ​​les mêmes valeurs, sauf que j'ajoute "return false" sur onClick lorsqu'il s'agit d'un appel javascript. Avoir "return false" dans la fonction appelée ne fonctionnait pas.

Bo Johanson
la source
pourquoi y en a-t-il deux? Pourquoi mettez-vous JS dans le HREF?
Supuhstar
Supuhstar, Le code actuel est dynamique, javascript, et générera un élément <a> pour plusieurs centaines d'éléments définis en externe. Chaque élément spécifiera soit une adresse de lien statique, et c'est là que l'élément <a> généré doit utiliser le "comportement href" normal. Ou, un appel de fonction javascript est spécifié pour l'élément, auquel cas le comportement de l'élément <a> est calculé, en fonction du contexte de l'élément. Et dans le code du générateur <a>, je voulais juste copier ce qui est spécifié pour chaque élément, sans tester s'il s'agit d'une adresse de lien ou d'un appel de fonction javascript.
Bo Johanson
Je ne comprends pas comment cela répond à ma question. Qui a dit que je voulais plusieurs centaines de liens? Je ne comprends vraiment pas le but de tout cela, ni même la moitié de ce que vous venez de dire.
Supuhstar
0

Cela a fonctionné pour moi:

<a href="" onclick="return false;">Action</a>
Zéro
la source
Merci pour votre réponse et bienvenue sur Stack Exchange! Malheureusement, cela ne semble pas ajouter de nouvelles connaissances, car il semble que les réponses précédentes le suggèrent déjà. Si vous êtes d'accord, il vaut mieux voter pour ceux-ci. Si vous n'êtes pas d'accord, veuillez modifier votre réponse afin que vos nouvelles connaissances soient révélées!
Supuhstar
0

Dans mon cas, j'avais une condition lorsque l'utilisateur cliquait sur l'élément "a". La condition était:

Si une autre section contenait plus de dix éléments, l'utilisateur ne devrait pas être redirigé vers une autre page.

Si une autre section contient moins de dix éléments, l'utilisateur doit être redirigé vers une autre page.

La fonctionnalité des éléments "a" dépend de l'autre composant. Le code dans l'événement de clic est le suivant:

var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
     return true;
}else{
     event.preventDefault();
     return false;
}
Jorge Santos Neill
la source