HTML attribut d'événement ondblclick

L'attribut d'événement ondblclick en HTML: Définition

L'attribut d'événement ondblclick en HTML est utilisé pour définir une action qui sera déclenchée lorsqu'un élément HTML est double-cliqué (clic rapide) par l'utilisateur.

Syntaxe générale

La syntaxe générale de l'attribut ondblclick est la suivante :

<element ondblclick="action()">

Où action() est un script à exécuter lorsque l'élément HTML est double-cliqué

Paramètres

Aucun paramètre spécifique n'est nécessaire pour l'attribut ondblclick.

Valeurs possibles

La valeur de l'attribut ondblclick doit être une chaîne de caractères représentant le code JavaScript à exécuter lors du double-clic.

Exemples pratiques d'utilisation

Exemple 1

Voici un exemple simple d'utilisation de l'attribut ondblclick :

Exemple : Copier le code

<button ondblclick="alert('Double-clic effectué !')">Cliquez ici</button>

Exemple 2

Code HTML, CSS, et JavaScript crée une page web simple avec un bouton. Lorsque l'utilisateur double-clique sur le bouton, une fonction JavaScript appelée myFunction est déclenchée, modifiant le contenu d'un élément de paragraphe (<p>) avec l'ID "demo".

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutoriel sur l'attribut ondblclick en HTML</title>
    <style>
        /* Ajoutez du style CSS si nécessaire */
    </style>
</head>
<body>

<button ondblclick="myFunction()">Cliquez deux fois sur moi</button>

<p id="demo"></p>

<p>Une fonction est déclenchée lorsque le bouton est double-cliqué. La fonction affiche du texte dans un élément p avec l'ID "demo".</p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Bonjour le Monde";
}
</script>

</body>
</html>

Voici une explication détaillée du code :

<button ondblclick="myFunction()">Cliquez deux fois sur moi</button> : Crée un bouton avec le texte "Cliquez deux fois sur moi". L'attribut ondblclick est utilisé pour définir l'événement de double-clic sur le bouton. Lorsque l'utilisateur double-clique sur le bouton, la fonction myFunction est appelée.
<p id="demo"></p> : Crée un élément de paragraphe vide avec l'ID "demo". Cet élément sera utilisé pour afficher le texte modifié par la fonction JavaScript.
<p>Une fonction est déclenchée lorsque le bouton est double-cliqué. La fonction affiche du texte dans un élément p avec l'ID "demo".</p> : Ajoute un paragraphe explicatif à la page web.
<script> : Balise d'ouverture pour incorporer du code JavaScript.
function myFunction() { document.getElementById("demo").innerHTML = "Bonjour le Monde"; } : Définit la fonction JavaScript myFunction. Cette fonction sélectionne l'élément de paragraphe avec l'ID "demo" en utilisant document.getElementById("demo") et change son contenu HTML à "Bonjour le Monde" à l'aide de .innerHTML.
</script> : Balise de fermeture pour le code JavaScript.

En résumé, lorsque le bouton est double-cliqué, la fonction myFunction est appelée, et elle remplace le contenu de l'élément de paragraphe avec l'ID "demo" par "Bonjour le Monde". Cela crée une interaction simple où le texte de la page est modifié en réponse à l'action de l'utilisateur sur le bouton.

Astuces et conseils d'utilisation

Assurez-vous que l'élément auquel vous ajoutez l'attribut ondblclick est interactif, comme un bouton, un lien, etc.
Évitez d'utiliser trop fréquemment cette fonctionnalité pour ne pas perturber l'expérience utilisateur.
Testez votre code sur différents navigateurs pour assurer une compatibilité maximale.

Appui de navigateur

L'attribut ondblclick est généralement bien pris en charge par les navigateurs modernes, y compris Google Chrome, Mozilla Firefox, Safari, et Microsoft Edge. Cependant, il est toujours recommandé de vérifier la compatibilité sur les navigateurs que vous souhaitez supporter.

Internet Explorer Firefox Opera Google Chrome Safari
L'attribut d'événement ondblclick est pris en charge dans tous les principaux navigateurs.