web-dev-qa-db-fra.com

Balise d'ancrage HTML avec l'événement Javascript onclick

En utilisant Google, j'ai constaté qu'ils utilisaient des événements onclick dans les balises d'ancrage.

Dans more option dans la partie d'en-tête de Google, cela ressemble à une balise normale, mais en cliquant dessus, elle ne sera pas redirigée mais ouvrira un menu. Normalement lors de l'utilisation

<a href='more.php' onclick='show_more_menu()'>More >>></a>

Il va généralement à 'plus.php' sans déclencher show_more_menu(), mais j'ai montrer un menu dans cette page elle-même. Comment faire comme google ?

javascripthyperlinkonclickanchor
59
smartkid

Si votre fonction onclick renvoie false, le comportement du navigateur par défaut est annulé. En tant que tel:

<a href='http://www.google.com' onclick='return check()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

Quoi qu'il en soit, le fait que Google le fasse ou non n'a pas beaucoup d'importance. Il est plus propre de lier vos fonctions onclick au javascript - de cette façon, vous séparez votre code HTML des autres codes.

88
TJHeuvel

Vous pouvez même essayer ci-dessous option: 

<a href="javascript:show_more_menu();">More >>></a>
45
sun2

D'après ce que j'ai compris, vous ne voulez pas rediriger lorsque le lien est cliqué . Vous pouvez faire:

<a href='javascript:;' onclick='show_more_menu();'>More ></a>
34
Aditya Manohar

Utilisez le code suivant pour afficher le menu au lieu d'aller à l'adresse href

<a href='more.php' onclick="show_more_menu(event)"> More >>> </a>

<script>
    function show_more_menu(e) {
        // ...  your function code
        // e.target.href  // a.href url
        e.preventDefault();
    }
</script>

Voici exemple de travail .

0
Kamil Kiełczewski