Comment désactiver le HREF si le onclick est exécuté ?

Question

J'ai une ancre avec les deux HREF y ONCLICK attributs définis. Si l'on clique dessus et que Javascript est activé, je veux qu'il soit seulement exécuter ONCLICK et ignorer HREF . De même, si le Javascript est désactivé ou non pris en charge, je veux qu'il suive le modèle de l'application HREF URL et ignorer ONCLICK . Voici un exemple de ce que je fais, qui exécuterait le JS et suivrait le lien simultanément (habituellement 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 procéder ?

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

Answer 1

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

Answer 2

Essayez d'utiliser javascript:void(0) comme suit-

<a href="javascript:void(0)" onclick="...">Text</a>

Answer 3

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 fait ce qui suit : Passer le lien relatif à Visualiseur de Google Docs

1. Obtenez la version complète du lien de l'ancre en this.href
2. Ouvrez le lien dans une 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">

Answer 4

J'ai résolu une situation où j'avais besoin d'un modèle pour l'élément qui gérerait alternativement une URL normale 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 référence propre 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 normal.

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. Le fait d'avoir "return false" dans la fonction appelée n'a pas fonctionné.

Answer 5

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

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

Si l'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;
}