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

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)

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

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>

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 .

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>

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>