Rendre une div cliquable à l'aide de JavaScript

1. Utilisation du gestionnaire d’événements onclick pour rendre une div cliquable
2. Ajout d’un clic conditionnel à un div
3. Bon d’avoir une fonctionnalité dans une div cliquable
4. Atteindre la fonctionnalité de l’élément d’ancrage avec une div cliquable

La balise <a> (ou l’élément d’ancrage) en HTML est couramment utilisée pour les contrôles de navigation. Il s’agit d’une balise cliquable qui fonctionne sans qu’aucun code javascript ne fonctionne dans les coulisses. Ce n’est pas un élément de bloc. Pouvons-nous utiliser une balise <div> pour le routage vers un chemin tout comme la balise d’ancrage ? La réponse est certainement oui, mais vous devrez écrire du code javascript pour cela. Nous pouvons utiliser un click handler sur l’élément <div> pour le rendre cliquable.

Utilisation du gestionnaire d’événements onclick pour rendre une div cliquable

L’élément d’ancrage est un inline affiché. Et cette fonctionnalité peut ne pas toujours fonctionner en notre faveur lors de la conception de l’interface utilisateur graphique. Les div sont faciles à utiliser lors de la conception d’interfaces graphiques car ce sont des éléments de bloc autonomes. Un div est un élément de division de contenu et n’est pas cliquable par défaut. On peut être amené à utiliser le gestionnaire d’événements onclick pour traiter les événements émis par l’élément lorsqu’un utilisateur clique dessus. Le gestionnaire d’événement onclick accepte une fonction ou une expression JavaScript précédant la fonction. Lorsqu’un utilisateur clique sur le div, javascript exécute les fonctions associées ou les expressions au moment de l’exécution. Il existe plusieurs façons d’ajouter le gestionnaire d’événements onclick à un élément div.

Utilisation de code HTML et JavaScript combinés pour rendre un div cliquable

L’approche la plus utilisée en javascript et dans divers frameworks de javascript est de lier un appel de fonction au gestionnaire d’événement onclick dans le code HTML. Ensuite, nous écrivons la définition de la fonction qui lui est associée dans le code javascript. Une fois qu’un utilisateur a cliqué sur le div, le gestionnaire d’événements onclick exécutera la fonction passée en argument au onclick de l’élément div. Référez-vous au code suivant.

<div id="title-div" onclick="sayHello()"></div>

function sayHello() {
  console.log('Hello there !!');
}

Une fois que l’utilisateur a cliqué sur title-div, la fonction associée sayHello() est exécutée. Et nous aurons Hello there !! connecté à la console Web. Cette approche est largement utilisée et facilite le débogage par rapport à l’approche javascript pure. Le code HTML montre explicitement la liaison.

Utiliser du JavaScript pur pour créer un div cliquable

Une autre approche est purement javascript. Nous trouvons d’abord l’élément HTML souhaité en utilisant l’une des méthodes telles que document.getElementById(), document.getElementsByClassName(), document.querySelectorAll() etc. La méthode la plus couramment utilisée pour trouver l’élément HTML est le document.getElementById() car il identifie de manière unique l’élément HTML en fonction de l’id que nous lui attribuons dans le code HTML. Une fois que nous avons trouvé l’élément, l’élément div, nous attachons le gestionnaire d’événement onclick et lions la fonction à exécuter sur click du div. Le code suivant illustre l’approche.

<div id="title-div">Click here</div>

window.onload =
    function() {
  var el = document.getElementById('title-div');
  el.onclick = sayHello;
}

function sayHello() {
  console.log('Hello');
}

Dans le code ci-dessus, nous lions le gestionnaire d’événements onclick uniquement en JavaScript. Il n’y a aucune trace de mappage onclick dans le HTML. Le HTML est simple avec un élément div et un id associé. Notez également que nous affectons l’objet fonction sayHello au gestionnaire d’événements onclick. Si nous lions sayHello() (avec parenthèses) au lieu de sayHello, cela entraînera l’exécution par JavaScript de la fonction sur la window se chargeant elle-même. Et rien ne se passera lorsqu’un utilisateur cliquera sur l’élément div.

Ajout d’un clic conditionnel à un div

Nous pouvons déclencher l’événement click de manière conditionnelle. En utilisant l’approche HTML et JavaScript, nous pouvons ajouter une expression couplée avec le && ou le || signe basé sur l’exigence. JavaScript exécute l’événement click en fonction de l’évaluation de l’expression booléenne. S’il est évalué à vrai, JavaScript exécute la fonction associée.

<div onclick="isEvenClick() && sayHello()">Click Here !!!</div>

function sayHello() {
  console.log('Hello');
}

function isEvenClick() {
  clickCounter++;
  return (clickCounter % 2 === 0)
}

Le code ci-dessus enregistrera Hello uniquement sur un nombre pair de clics. Nous pouvons également écrire le même code avec expression au lieu de la fonction isEvenClick() comme expliqué dans le code suivant.

<div onclick="(++clickCounter % 2 === 0) && sayHello()" id="title-div">Click here</div>

L’expression est évaluée au moment de l’exécution pour la valeur de clickCounter. Si le clickCounter est pair, l’expression (++clickCounter % 2 === 0) est évaluée à true et la fonction sayHello() est exécutée.

Bon d’avoir une fonctionnalité dans une div cliquable

Une fois que nous avons ajouté un écouteur click à un div, ce sera toujours un div. L’utilisateur ne comprendra pas si cet élément HTML est associé à une interaction utilisateur. À cette fin, nous pouvons ajouter des fonctionnalités en utilisant les styles CSS. Une telle chose est de faire du curseur une icône de main. On peut le faire en utilisant cursor: pointer. C’est une bonne pratique UI/UX d’indiquer à l’utilisateur final que cet élément HTML est exploitable. Nous pouvons le faire de la manière suivante.

<div onclick="sayHello()" style="cursor: pointer;">Click Here !!!</div>

Nous pouvons obtenir la même chose en utilisant du JavaScript pur en ajoutant des styles à l’élément au moment de l’exécution. Nous sélectionnons d’abord l’élément à l’aide de document.getElementById(), puis ajoutons le style de curseur à l’aide de el.style.cursor et lui attribuons la valeur de chaîne pointer. Le code suivant l’explique.

<div onclick="sayHello()">Click Here !!!</div>

window.onload =
    function() {
  var el = document.getElementById('title-div');
  el.style.cursor = 'pointer';
  el.onclick = sayHello;
}

function sayHello() {
  console.log('Hello');
}

Atteindre la fonctionnalité de l’élément d’ancrage avec une div cliquable

Nous pouvons utiliser un élément div pour imiter un élément anchor. La balise <a> a un attribut appelé href qui crée un lien hypertexte. On peut imiter le même comportement en utilisant le onclick d’un div. Nous lions une fonction pour capturer l’événement click dans le code HTML. Dans le code javascript, on utilise l’attribut window.location.href pour lier une URL au div. Observez le fonctionnement dans le code suivant.

<div onclick="navToGoogle()" style="cursor: pointer;">Take me to Google</div>

function navToGoogle() {
  window.location.href = 'https://www.google.com';
}