web-dev-qa-db-fra.com

ajouter un événement onclick à un div

Je ne sais pas si cela est permis ou même possible. Est-il possible de créer un élément div avec un événement onclick de sorte que si n'importe où dans la zone du div est cliqué, l'événement se déroulera.

Par exemple JAVASCRIPT:

var divTag = document.createElement("div");
divTag.id="new-ID"; 
var onClickCommand = "printWorking()"   //printworking is another method that simply print "I'm working" to the console
divTag.onclick = onClickCommand;
console.log("onclick command added");
console.log(divTag.onclick);
parentDiv.appendChild(divTag); //This simply adds the div tag to the page.

HTML généré:

 <!--<div id="new-ID">-->

 whatever content I decide to add to the divTag.innerHTML

Je remarque qu'il n'y a pas de commande onclick passant par le div généré. C'est parce que ce n'est pas autorisé?

Alors 2 questions alors.

1: Est-il possible d'ajouter un clic à un div et de le faire se produire si une zone du div est cliquée. 2: Si oui, alors pourquoi la méthode onclick ne passe-t-elle pas par mon div.

C'est très étrange:

divTag.setAttribute("onclick", "printWorking()");

Ci-dessus fonctionne parfaitement.

Tous ci-dessous ne le font pas et ne passeront pas le onclick à la div.

divTag.onclick=printWorking;

divTag.onclick="printWorking";

divTag.onclick="printWorking()";

Plusieurs autres variantes ont également été essayées.

javascriptcsshtmlonclick
27
OVERTONE

Est-il possible d'ajouter un clic à un div et de le faire se produire si une zone du div est cliquée.

Oui… bien que cela doive être fait avec prudence. Assurez-vous qu'il existe un mécanisme permettant l'accès au clavier. Construire sur des choses qui fonctionnent

Si oui, alors pourquoi la méthode onclick ne passe-t-elle pas par mon div.

Vous affectez une chaîne à laquelle une fonction est attendue.

divTag.onclick = printWorking;

Il existe cependant de meilleures façons d'affecter des gestionnaires d'événements, bien que les anciennes versions d'Internet Explorer soient suffisamment différentes pour que vous puissiez utiliser une bibliothèque pour l'abstraire. Il y a beaucoup de très petites bibliothèques d'événements et chaque bibliothèque principale jQuery ) a une fonctionnalité de gestion des événements.

Cela dit, c'est maintenant 2019, les anciennes versions d'Internet Explorer n'existent plus dans la pratique, vous pouvez donc aller directement à addEventListener

23
Quentin

Attribuez le onclick comme ceci:

divTag.onclick = printWorking;

La propriété onclick ne prend pas de chaîne lorsqu'elle est affectée. Au lieu de cela, il prend une référence de fonction (dans ce cas, printWorking).
L'attribut onclick peut être une chaîne lorsqu'il est attribué en HTML, par exemple <div onclick="func()"></div>, mais ce n'est généralement pas recommandé.

2
Digital Plane

Tout fonctionne bien. Vous ne pouvez pas utiliser divtag.onclick, car l'attribut "onclick" n'existe pas. Vous devez d'abord créer cet attribut à l'aide de .setAttribute (). Regardez sur ce sujet http://reference.sitepoint.com/javascript/Element/setAttribute . Vous devez lire les documentations avant de commencer à donner "-".

2
godlark