Balise HTML <a> je veux ajouter à la fois href et onclick qui fonctionnent.

Question

J'aimerais poser une question sur la balise HTML

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

Comment faire a tag travaillant avec href y onClick ? (je préfère que l'onClick soit exécuté en premier puis le href)

Answer 1

Vous avez déjà ce dont vous avez besoin, avec un changement mineur de syntaxe :

<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> de l'étiquette onclick y href est d'exécuter le onclick puis suivez les href tant que le onclick ne renvoie pas false l'annulation de l'événement (ou l'événement n'a pas été empêché)

Answer 2

Utilisez jQuery . Vous devez capturer le click et ensuite aller sur le 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>

Answer 3

Pour ce faire, 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>

Aquí está exemple de travail .

Answer 4

Pas besoin de jQuery.

Certaines personnes disent qu'utiliser onclick est une mauvaise pratique...

Cet exemple utilise le javascript pur du navigateur. Par défaut, il semble que le gestionnaire de clics sera évalué 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>

Answer 5

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

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