web-dev-qa-db-fra.com

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

J'ai une ancre avec les deux attributs HREF et ONCLICK. Si vous cliquez sur et que Javascript est activé, je le veux seulement exécuter ONCLICK et ignorer HREF. De même, si Javascript est désactivé ou non pris en charge, je souhaite qu'il suive l'URL HREF et ignore ONCLICK. Vous trouverez ci-dessous un exemple de ce que je suis en train de faire, qui exécuterait le JS et suivrait le lien simultanément (généralement le JS est exécuté, puis la page change):

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

quelle est la meilleure façon de faire cela?

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

javascripthtmlonclickanchorhref
78
Supuhstar

Vous pouvez utiliser la première solution non modifiée si vous mettez d'abord return dans l'attribut onclick:

<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/

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

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

Edit: Désolé, cela ne semble pas fonctionner, vous pouvez effectuer les opérations suivantes:

<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>
56
Chris Bier

Désactivez simplement le comportement du navigateur par défaut à l'aide de preventDefault et transmettez le event dans votre code HTML.

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

yes_js_login = function(e) {
  e.preventDefault();
}
29
Buksy
<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 affectez la classe .ignore-click à autant d'éléments que vous aimez et les clics sur ces éléments seront ignorés

14
Andrew

Vous pouvez utiliser ce code simple:

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

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

<a href="#" onclick="yes_js_login(event);">link</a>

function yes_js_login(e) {
    e.stopImmediatePropagation();
}
5
Trigon219

Cela pourrait aider. Pas besoin de JQuery 

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

Ce code a les effets suivants: Transmettez le lien relatif vers Google Docs Viewer

  1. Obtenez la version complète du lien de l'ancre par this.href
  2. ouvrez le lien vers 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">
1
marlo

J'ai résolu une situation dans laquelle j'avais besoin d'un modèle pour l'élément pouvant gérer alternativement une URL classique ou un appel javascript, la fonction js nécessitant une référence à l'élément appelant. En javascript, "ceci" fonctionne comme une référence automatique uniquement dans le contexte d'un élément de formulaire, par exemple un bouton. Je ne voulais pas d'un 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" à onClick lorsqu'il s'agit d'un appel javascript. Avoir "return false" dans la fonction appelée n'a pas fonctionné.

1
Bo Johanson

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

Si une autre section contient plus de dix éléments, l'utilisateur ne doit 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 click est le suivant:

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

Cela a fonctionné pour moi:

<a href="" onclick="return false;">Action</a>
0
Zero