11540 sujets

JavaScript, DOM et API Web HTML5

Comment recuperer un évènement [resolu]

Salut,

Je souhaite savoir sur quel balise div j'ai cliqué en utilisant l'objet Event.

Voudriez vous bien m'aider ? Je ne parviens pas à trouver de solutions.

Je sèche totalement sur ce coup là.

Merci.

Le code :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Clic</title>
</head>
<body>
<div id="1" onclick="quelclic()">Mon premier div</div>
<div id="2" onclick="quelclic()">Mon deuxieme div</div>
<script>
function quelclic()
{
 
}
</script>
</body>
</html>

Modifié par sylvainmart (31 May 2007 - 09:54)
Salut,

Comme ça


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Clic</title>
</head>
<body>
<div id="1"  onclick="quelclic(this);">Mon premier div</div>
<div id="2"  onclick="quelclic(this);">Mon deuxieme div</div>
<script>
function quelclic(obj)
{
 alert(obj.id);
}
</script>
</body>
</html>


je m'en doutais depuis le debut....mais comme je suis une bille en js j'ai eu du mal a l'écrire.
c'est fait et j'ai meme appris quelques trucs au passage comme l'usage de firebug Smiley biggrin

edit: aie tu tiens a utiliser l'objet Event? Smiley confus bon ben raté alors
Modifié par CPascal (30 May 2007 - 23:03)
bon 

function quelclic()
{
 alert(window.event.srcElement.id);
}

j'ai testé ça qui marche sur IE

mais sous FF faut utiliser target si j'en crois le site de quentinC.
Je suis tombé sur son site pour apprendre le javascript: "le monde est petit" comme on dit Smiley biggrin .
Modifié par CPascal (30 May 2007 - 23:30)
bonsoir ,

concernant une compatibilité avec FF voir cet article sur
MDC .



a écrit :

CPascal a écrit
sous FF faut utiliser target si j'en crois le site de quentinC.


evt.target pour être plus précis !! Smiley cligne qui renvoie l'élément sur lequel survient
l'évènement. .. il sufit de récupérer l'attribut souhaité .
Bonjour,
D'abord, la fonction doit être définie avant son utilisation; ensuite, dans tout les navigateurs compatibles (sauf IE), l'évènement se retrouve en paramètre de la fonction.
Le mieux est d'utiliser "onclick" seulement sur des éléments cliquables (liens ou boutons) et le top des tops, c'est pas de javascript obstructif.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Clic</title>
<script type="text/javascript">
var gk=window.innerWidth?1:0 //gecko ; 
var ie=navigator.appVersion.substr(17,4)=="MSIE"?1:0

// Ajout d'une action sur un événement
var addEvent = function(obj, type, fonction){
if (obj.addEventListener){	// code standard DOM
    obj.addEventListener(type, fonction, false);}
else if (obj.attachEvent){ 	// code propriétaire MSIE
    var r = obj.attachEvent("on"+type, fonction); return r;}
}

// Arrête la poursuite de l'évènement
var stopEvent = function(e){
if(e.preventDefault){ e.preventDefault(); e.stopPropagation();}	// code standard DOM
else if(ie){e.cancelBubble = true; e.returnValue = false;}	// code propriétaire MSIE
return false; // pour les autres
}

function quelclic(e)
{
selObj =gk?e.target // DOM gecko valide w3c
:window.event.srcElement // IE seulement
if(!selObj.tagName){selObj=selObj.parentNode;} // noeud #text 
if(selObj.tagName=="A")
	{
	alert(selObj.id)
	}
stopEvent(e)//pour empécher l'action du lien
}
addEvent(document,"click",quelclic)
</script>
</head>
<body>
<a id="1" href="#">Mon premier élément</a><br />
<a id="2" href="#">Mon deuxieme élément</a>
</body>
</html>


Et si les liens ne sont pas utiles sans js, il faut les créer en DOm/javascript Smiley cligne
Hello,
chmel a écrit :
selObj =gk?e.target // DOM gecko valide w3c
:window.event.srcElement // IE seulement

Inutile (et dangereux) d'utiliser une détection de navigateur pour ce genre de choses. Smiley smile
a écrit :
selObj = e.target || e.srcElement;

Petite remarque supplémentaire : un ID commençant par un chiffre est invalide.
Merci à tous, le problème est résolu.

C'est vraiment fantastique que vous soyez là et c'est vraiment sympa de répondre.

Je vais prendre la première solution de CPascal et étudier celle de chmel.

Que de temps gagné grace à vous !

Sylvain.
Salut,

J'ai fait un petit mix de tout ce qui a été proposé sur le sujet.

Mon but est d'effectuer une action (inserer des enregistrements dans une base de données mysql) en fonction du clic.

Pour ajouter et gérer l'évènement j'utilise le script de David flanagan (handler.js) :


handler.js


<title>Clic</title>

<script type="text/javascript" src="handler.js">
</script>

<script type="text/javascript">
Handler.add(document,"click",quel_clic);
function quel_clic (e)
{
 ObjetCourant = e.target || e.srcElement;
 if(!ObjetCourant.tagName)
 {
  ObjetCourant=ObjetCourant.parentNode;
 }
 if(ObjetCourant.tagName=="DIV")
 {
	if (ObjetCourant.id == "ajouter1")
	{
   alert('faire 1');
	}
	if (ObjetCourant.id == "ajouter2")
	{
	 alert('faire 2');
	}
 }
}
</script>

</head>

<body>

<div id="ajouter1">Mon premier élément</div>

<div id="ajouter2">Mon deuxieme élément</div>

</body>

</html>


Encore merci !
Modifié par sylvainmart (31 May 2007 - 12:41)
Sujet clos
Aller à