appeler la fonction javascript en cliquant sur le lien hypertexte

Réponses:

133

Plus soigné encore, au lieu du typical href="#"ou href="javascript:void"ou href="whatever", je pense que cela a beaucoup plus de sens:

var el = document.getElementById('foo');
el.onclick = showFoo;


function showFoo() {
  alert('I am foo!');
  return false;
}

<a href="no-javascript.html" title="Get some foo!" id="foo">Show me some foo</a>

Si Javascript échoue, il y a des commentaires. De plus, le comportement erratique (saut de page dans le cas de href="#", visite de la même page dans le cas de href="") est éliminé.

karim79
la source
13
+1 C'est actuellement la seule réponse discrète. +100 si je pouvais.
James
@Lewis, oui, idéalement, les balises <a> ne seraient pas utilisées pour les appels js purs, mais malheureusement, les navigateurs plus anciens ne supportaient pas: hover pour les éléments sans lien. Les liens étaient donc souvent utilisés pour déclencher des événements js.
Chris Van Opstal
@Chris - Je ne suis pas sûr que vous compreniez mon point Chris. Je vous suggère de ne pas utiliser <a href="#"> Ne rien faire </a>, mais plutôt d'utiliser <a href="a/link/somwhere.html"> Faire quelque chose </a>, puis d'utiliser amélioration progressive pour remplacer le href. C'est la solution la plus propre. Les ancres sont bonnes, mais elles devraient faire QUELQUE CHOSE si javascript est désactivé - ou pour une raison quelconque (selon IE6), un javascript est tombé en panne avant que le gestionnaire ne soit créé et attribué. De cette façon, tous vos utilisateurs sont satisfaits.
Lewis
2
Ne fonctionne pas pour moi, exécute simplement automatiquement la fonction onclick lors du chargement de la page. Cela ressemble également à un cauchemar en matière d'accessibilité.
Shawn Solomon
4
Cela ne fonctionne pas, cela vous dirige simplement vers l'url href.
paddotk
58

La réponse la plus simple de toutes est ...

<a href="javascript:alert('You clicked!')">My link</a>

Ou pour répondre à la question de l'appel d'une fonction javascript:

<script type="text/javascript">
function myFunction(myMessage) {
    alert(myMessage);
}
</script>

<a href="javascript:myFunction('You clicked!')">My link</a>

Jayden Lawson
la source
2
Le lien dans le "Extrait de code d'exécution" de StackOverflow ne fonctionne pas dans Firefox (aucune alerte n'est créée), mais il fonctionne dans FF lorsque je mets ce type de lien sur une page Web normale.
the_pwner224
Oui, c'est bizarre, ça fonctionnait pour moi, maintenant ça ne l'est plus. D'autres avaient des problèmes similaires et il ne semble y avoir aucune solution définitive, à part la réinstallation complète de Firefox.
Jayden Lawson
26

Avec le paramètre onclick ...

<a href='http://www.google.com' onclick='myJavaScriptFunction();'>mylink</a>
amischiefr
la source
déclaration déroutante. va-t-il aller sur google.com ou appeler la fonction javascript? qui a la priorité?
Nguai al
12

La réponse JQuery. Depuis que JavaScript a été inventé pour développer JQuery, je vous donne un exemple dans JQuery faisant ceci:

<div class="menu">
    <a href="http://example.org">Example</a>
    <a href="http://foobar.com">Foobar.com</a>
</div>

<script>
jQuery( 'div.menu a' )
    .click(function() {
        do_the_click( this.href );
        return false;
    });

// play the funky music white boy
function do_the_click( url )
{
    alert( url );
}
</script>
elcuco
la source
53
JavaScript a été inventé pour développer jQuery? C'est un nouveau!
palswim
35
C'était comme lire que Lego a été inventé pour construire Lego Batman.
Shawn Solomon
5
@ShawnSolomon Je suis heureux que nous soyons d'accord :)
elcuco
1
@elcuco, super sarcasme! + 'd :) Long Live JQuery
Zuul
6

Je préfère utiliser la méthode onclick plutôt que le href pour les hyperliens javascript. Et utilisez toujours des alertes pour déterminer la valeur que vous avez.

<a href='#' onclick='jsFunction();alert('it works!');'>Link</a>

Il pourrait également être utilisé sur les balises d'entrée, par exemple.

<input type='button' value='Submit' onclick='jsFunction();alert('it works!');'>

Marky
la source
3

Idéalement, j'éviterais complètement de générer des liens dans votre code, car votre code devra être recompilé à chaque fois que vous souhaitez modifier le «balisage» de chacun de ces liens. Si vous devez le faire, je n'intègre pas vos «appels» javascript dans votre HTML, c'est une mauvaise pratique, votre balisage doit décrire votre document et non ce qu'il fait, c'est le travail de votre javascript.

Utilisez une approche où vous avez un identifiant spécifique pour chaque élément (ou classe si sa fonctionnalité commune), puis utilisez Progressive Enhancement pour ajouter le ou les gestionnaires d'événements, quelque chose comme:

[c# example only probably not the way you're writing out your js]
Response.Write("<a href=\"/link/for/javascriptDisabled/Browsers.aspx\" id=\"uxAncMyLink\">My Link</a>");

[Javascript]  
document.getElementById('uxAncMyLink').onclick = function(e){

// do some stuff here

    return false;
    }

De cette façon, votre code ne cassera pas pour les utilisateurs avec JS désactivé et il aura une séparation claire des préoccupations.

J'espère que c'est utile.

Lewis
la source
1
Pourquoi c#? Pourquoi pas juste <a href="https://stackoverflow.com/link/for/javascriptDisabled/Browsers.aspx" id="uxAncMyLink">My Link</a>?
Mahmoodvcs
2

Je recommanderais généralement d'utiliser element.attachEvent (IE) ou element.addEventListener (autres navigateurs) plutôt que de définir l'événement onclick directement car ce dernier remplacera tous les gestionnaires d'événements existants pour cet élément.

attachEvent / addEventListening permettent de créer plusieurs gestionnaires d'événements.

Simon
la source
1

Utilisez l' onclickattribut HTML .

Le onclickgestionnaire d'événements capture un événement de clic à partir du bouton de la souris des utilisateurs sur l'élément auquel l' onclickattribut est appliqué. Cette action aboutit généralement à un appel à une méthode de script telle qu'une fonction JavaScript [...]

Donut
la source
1

Si vous n'attendez pas que la page soit chargée, vous ne pourrez pas sélectionner l'élément par identifiant. Cette solution devrait fonctionner pour toute personne ayant des difficultés à exécuter le code

<script type="text/javascript">
window.onload = function() {
    document.getElementById("delete").onclick = function() {myFunction()};

    function myFunction() {
        //your code goes here
        alert('Alert message here');
    }
};
</script>

<a href='#' id='delete'>Delete Document</a>
user2197701
la source