La balise HTML <a> veut ajouter à la fois href et onclick fonctionnant

123

Je voudrais poser une question sur la balise HTML

<a href="www.mysite.com" onClick="javascript.function();">Item</a>

Comment en faire une balise fonctionnant avec href et onClick ? (préférez onClick en premier puis href)

232

Vous avez déjà ce dont vous avez besoin, avec une modification de syntaxe mineure:

<a href="www.mysite.com" onclick="return theFunction();">Item</a>

<script type="text/javascript">
    function theFunction () {
        // return true or false, depending on whether you want to allow the `href` property to follow through or not
    }
</script>

Le comportement par défaut de la <a>balise onclicket des hrefpropriétés est d'exécuter le onclick, puis de suivre le hreftant que le onclickne retourne pas false, annulant l'événement (ou l'événement n'a pas été empêché)

— Ian
source

Existe-t-il également un moyen de le faire avec une fonction element.addEventListener?

— TheEquah

4

Cela ne fonctionne pas pour moi, jusqu'à ce que je mette href="#"là au lieu d'une vraie URL.

— yegor256

J'utilise le framework laravel, donc dans ma vue de la lame, j'ai inclus ceci, cela ne fonctionne pas, est-ce que quelqu'un a essayé cela avec laravel?

— Vajira Prabuddhaka

Cette solution ne fonctionne pas si j'ai une méthode d'action appelée dans le contrôleur mvc dans href. Quelqu'un peut-il s'il vous plaît aider?

— DharaPPatel

10

Utilisez jQuery . Vous devez capturer l' clickévénement, puis accéder au site Web.

$("#myHref").on('click', function() {
  alert("inside onclick");
  window.location = "http://www.google.com";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myHref">Click me</a>

Développer l'extrait

— Sudipta Chatterjee
source

11

je n'utiliserai aucun framework javascript. mais merci pour votre réponse

7

Ci-dessus n'est pas un lien réel. Il ne peut pas être ouvert dans un nouvel onglet et est une très mauvaise pratique. Si quelque chose peut être ouvert dans un nouvel onglet (avec une url na), ajoutez toujours un hrefattribut significatif .

— Nux

2

Pour y parvenir, utilisez le code HTML suivant:

<a href="www.mysite.com" onclick="make(event)">Item</a>

<script>
    function make(e) {
        // ...  your function code
        // e.preventDefault();   // use this to NOT go to href site
    }
</script>

Voici un exemple de travail .

— Kamil Kiełczewski
source

Cela fonctionne pour moi dans Chrome, mais Safari semble exécuter la fonction mais ne pas ouvrir le href ... des suggestions?

— Ben

@Ben j'ai fait un test sur violon sans JS - uniquement du html pur: <a href="http://example.com" >Item</a>et dans Chrome, je vois un message pour autoriser la page à exécuter ce lien (alerte à la fin de la barre d'URL de chrome). Dans safari dans la console, je vois des avertissements: [bloqué] La page de fiddle.jshell.net/_display n'a pas été autorisée à afficher du contenu non sécurisé à partir d' exemple.com - il s'agit probablement d'un problème de sécurité (uniquement sur violon?)

— Kamil Kiełczewski

1

Aucun jQuery nécessaire.

Certaines personnes disent que l'utilisation onclickest une mauvaise pratique ...

Cet exemple utilise du javascript de navigateur pur. Par défaut, il semble que le gestionnaire de clics évaluera avant la navigation, vous pouvez donc annuler la navigation et faire la vôtre si vous le souhaitez.

<a id="myButton" href="http://google.com">Click me!</a>
<script>
    window.addEventListener("load", () => {
        document.querySelector("#myButton").addEventListener("click", e => {
            alert("Clicked!");
            // Can also cancel the event and manually navigate
            // e.preventDefault();
            // window.location = e.target.href;
        });
    });
</script>

— TeamDman
source

-1

Utilisez ng-clickà la place de onclick. et c'est aussi simple que ça:

<a href="www.mysite.com" ng-click="return theFunction();">Item</a>

<script type="text/javascript">
function theFunction () {
    // return true or false, depending on whether you want to allow 
    // the`href` property to follow through or not
 }
</script>

— mak-273
source

Only in AngularJS

— Corrodian