11548 sujets

JavaScript, DOM et API Web HTML5

Identifier l'id d'un élément lorsqu'on clique dessus

Bonjour,

j'ai dans une page XHTML un cadre où l'utilisateur peut (via un bouton) ajouter des balises dynamiquement.

Ce que je souhaiterai faire, c'est une alerte qui affiche l'id d'une balise lorsqu'on clique dessus. Pour y arriver, je voudrais utiliser DOM si possible... afin de ne pas alourdir le balisage de la page.

Merci pour votre aide Smiley smile

z4n9ief
Même si c'est pas la réponse recherchée, une piste serait de trouver un moyen d'ajouter via DOM pour toutes les balises l'équivalence de :
 onclick="alert(this.id);"

Modifié par tsing (10 Jun 2007 - 19:11)
bonjour et bienvenue sur ce forum,
Un truc comme ça ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" id="page">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Id de l'élément cliqué </title>
        <script type="text/javascript"><!--
 
(function() {

var addEvent = function (obj,evType,fn){
	if(obj.addEventListener){obj.addEventListener(evType,fn,false)} 
	else if(obj.attachEvent)obj.attachEvent("on"+evType,fn) 
	} 

addEvent(document, 'mousedown', function(e){
	var el= e.target||event.srcElement;
	if(!el.tagName)el=el.parentNode;
	alert('vous avez cliqué sur un élément "'+el.tagName+'" dont l\'id est "'+el.id+'"')});

})();

        //--></script>
        <style type="text/css"><!--

@media screen, projection
{
html{
		background-color: #fff;
}
body	{
		margin:0;
		padding:10px;
		background-color: #ffc;
	}
span	{
		background-color: #fcf;
	}
p	{
		background-color: #cfc;
	}
div	{
		background-color: #cff;
	}

*	{
		margin: 3px;
		border: 1px dashed #000;
	}
};

        --></style>
    </head>
    <body id="body">
        <p id="p1">Cliquer sur un élément pour connaitre son id.</p>
        <p id="p2">Toto 1</p>
        <div id="div1">Toto 2</div>
        <span id="span1">Toto 3</span>
        <p id="p3">Toto 4</p>
    </body>
</html>

Modifié par chmel (11 Jun 2007 - 00:44)
Impressionnant comme code, Merci beaucoup chmel ! Smiley biggol

Euh, pourrait-on configurer ce système afin qu'il ne lance une alerte seulement lorsque l'on clique dans la zone dont l'id est body ?

Merci encore Smiley biggrin Smiley biggrin
ben en ajoutant une condition :
if(el.id=="body")alert("mon id est "+el.id)})

Mettre une id = "body" à l'élément body n'a pas de sens. Je ne suis pas sur d'avoir compris ta question. Si tu veux savoir si tu cliques sur le body, entre 2 éléments non contigus :
if(el.tagName=="BODY")alert("vous avez cliqué sur le body")})

pour que ce soit évident, j'ai modifié le code de mon post précédent
Modifié par chmel (11 Jun 2007 - 00:46)
chmel a écrit :
Je ne suis pas sur d'avoir compris ta question.
En fait, je voulais savoir s'il était possible d'utiliser cette fonction pour toutes les balises se trouvant à un endroit du document bien précis. Par exemple, tous les tagues qui se trouvent dans :
<div id="ensemble"></div>
C'est l'élément le plus prés de la souris qui va déclencher l'évènement. Si tu as des éléments supperposés, c'est celui du dessus qui va être détecté. pour des éléments en "position absolute", c'est celui avec le z-index le plus élevé. Pour un lien sur une image, tu peux atteindre le lien sur le bord de l'image si il a un "padding" suffisant. Au clavier tout ne sera pas accessible.
tsing a écrit :
En fait, je voulais savoir s'il était possible d'utiliser cette fonction pour toutes les balises se trouvant à un endroit du document bien précis. Par exemple, tous les tagues qui se trouvent dans :
<div id="ensemble"></div>

Tu ajoutes une condition :
if (el.parentNode.id == "ensemble"){ accés aux enfants directs }

Modifié par chmel (17 Jun 2007 - 03:47)
Merci encore pour ton aide chmel. Tout fonctionne très bien, j'ai juste encore un petit problème par rapport au dernier point. J'ai, comme tu me l'as expliqué, ajouté la condition et mon script est devenu :
(function() {
	var addEvent = function (obj,evType,fn) {
		if (obj.addEventListener) {
			obj.addEventListener(evType,fn,false)
		} else if (obj.attachEvent) obj.attachEvent("on"+evType,fn)
	}
	addEvent(document, 'mousedown', function(e) {
		var el = e.target||event.srcElement;
		if (!el.tagName) el=el.parentNode;
		if (el.parentNode.id == "ensemble") alert('vous avez cliqué sur un élément "'+el.tagName+'" dont l\'id est "'+el.id+'"');
	});
})();
Cependant, en ayant ajouté la condition
a écrit :
if (el.parentNode.id == "ensemble")
...rien ne va plus. Je vais essayer de faire des tests pour que ça puisse passer.
Modifié par tsing (18 Jun 2007 - 20:44)
Sujet clos
Aller à