11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] IE, gestion des évenements

Salut à tous,

Après avoir découvert que IE ne gérait pas la propriété setAttribute pour le onclick , j'ai reussi à attribuer un événement à des div avec addEventlistener et attachEvent pour IE : 

if(vignette.addEventlistener)
{
   vignette.addEventlistener("click",clickVign,false);
}
else(vignette.attachEvent)
{
   vignette.attachEvent("onclick",clickvign);
}


De son coté là fonction clickVign devrait m'afficher l'id du div sur le quel je clic : 

function clickVign(event)
{
   alert(this.id);
}


Sous FF pas de problème mais sous IE il me retourne "undefined". J'en conclue donc qu'il ne gère pas le this de la même manière que FF.

Comment puis je faire ?

Merci
Modifié par grunky (18 Oct 2007 - 15:06)
C'est ce tuto qui m'a permis de régler le probleme du set attribute Smiley smile

J'ai déjà essayé les "astuces" proposées mais j'avoue que je rame un peu Smiley ohwell
Modifié par grunky (17 Oct 2007 - 17:27)
Re',

un extrait du tuto :
a écrit :
Internet Explorer supporte dans ce cas l'accès à l'élément auquel on a ajouté le gestionnaire d'événement par l'intermédiaire de this. Par contre, il ne passe par l'objet Event comme paramètre de la fonction, mais l'associe à la variable globale event. Pour le récupérer sur tous les navigateurs, il faut donc écrire quelque chose de similaire à :
function envoiForm(event) {
  event = event || window.event;
  // event est l'objet Event
}
Smiley biggrin

*Edit: et pour les propriétés et méthodes de l'objet event voir cette page de mozilla.org
Modifié par Heyoan (17 Oct 2007 - 18:01)
Merci ,
Alors , j'ai utiliser la chose suivante : 

cible = event.target || window.event.srcElement
alert(cible.id)


Celà me retourne bien l'id du div sur lequel je clique. En revanche mes div sont généré dynamiquement au fur et à mesure des actions de l'utilisateur et la detection de l'id ne marche que sur le dernier div généré. Pour les autres la boite "alert" s'ouvre bien mais elle est vide

Une idée
Je ne peut malheuresement pas te montrer la page concerné, mais voici les fonction posant problème :

validDiapo() est appelée au clic sur un bouton , son but est de placer une image dans un div (après traitement ajax) puis de générer le div suivant (des cadres blanc qui se suivent et qui sont remplis au fur et à mesure).

clickVign() permet de selectionner un div et de lui appliquer une bordure (pour illustrer la selection)

Deletedclicked() est là pour supprimer le div cliqué.


function validDiapo(modele,bandeau,caseid,curDiapo)
{

	if(caseid=="")
	{
		caseid = 1;
	}
	param='modele='+modele+'&bandeau='+bandeau;
	url='ajax/ajax_validDiapo.php';
	
	// Affichage de l'image
	new Ajax.Updater(
	{success : 'vignette-'+curDiapo, failure : 'erreur'},
	url,
	{ parameters : param,
	  evalScripts : true , 
	  method : 'post',
	  onLoading: loading,
	  onComplete: loading
	}

	);
	// Déclaration du div père
	var conteneur =  document.getElementById('lesvignettes');
	caseidNext = caseid + 1;
	nextDiapo = curDiapo+1;
	//Création de l'image

		var imageDiv = document.createElement("img");
		imageDiv.src = 'images/fleche_pres.gif';
		conteneur.appendChild(imageDiv);
		imageDiv.setAttribute("id","image-"+nextDiapo);
		imageDiv.className='floatL';
		
		// Retour à la ligne si 5 vignette afficher
		if(nextDiapo==6 || nextDiapo==11 || nextDiapo==17)
		{
			var clearDiv = document.createElement("div");
			conteneur.appendChild(clearDiv);
			clearDiv.className = 'clearB';
		}
		// Création de la prochaine vignette
		
		var vignetteDiv = document.createElement("div");
		
		// Création du div
		conteneur.appendChild(vignetteDiv);
		vignetteDiv.setAttribute("id","vignette-"+nextDiapo);
		
		if(vignetteDiv.addEventListener)
			vignetteDiv.addEventListener("click",clickVign,false);
		else
			vignetteDiv.attachEvent("onclick",clickVign);
		
		vignetteDiv.className = 'vignette';		
}

var selectedVignette = -1;

function clickVign(event)
{
	cible = event.target || window.event.srcElement;
	//alert(cible.id);
	
	var vignette = $("vignette-"+cible.id);
	var classe = vignette.className;
	//alert(id);
	if(classe == 'vignette')
		vignette.className = 'vignetteClick';
	else
		vignette.className = 'vignette';
	selectedVignette = id; // id à définir en fct de cible.id
	//alert(classe);
	//alert(selectedVignette);
}

function deleteClicked()
{
	if(selectedVignette==-1)
	{
		alert("Vous devez d'abord sélectionner une vignette");
	}
	else
	{
		var vignette = $("vignette-"+selectedVignette);
		vignette.className = 'vignette';
		razDiapoSelec(selectedVignette);
	}
	selectedVignette = -1;
}


Si j'utilise setAttribute , aucun soucis, mais quand je veux rendre tout celà compatible c'est là qu'est le problème. le paramettre passer dans l'évènement onclick est un chiffre commenceant à 1 e tpouvant aller très loin ^^.

Quand j'utilise les methode AttachEvent et AddEvent... seul le dernier Div est "selectioné" (application d'une bordure) et ce quelque soit le div cliqué.

Pour illustrer ce que je dis voici une image de l'interface :
http://img134.imageshack.us/img134/6528/demoku4.gif
Quand je clique sur la dernière vignette j'ai bien son id , mais lorsque je clique sur les autres l'alert est vide
PS : pour les fonction "exotique' c'est du prototype
Modifié par grunky (18 Oct 2007 - 13:58)
Re',

je ne comprends pas trop ta fonction clickVign Smiley rolleyes ...

ça ne marcherait pas mieux comme ça :
function clickVign(event)
{
	vignette = event.target || window.event.srcElement;
	var classe = vignette.className;
	if(classe == 'vignette')
		vignette.className = 'vignetteClick';
	else
		vignette.className = 'vignette';
	selectedVignette = vignette.id; 
}
?

A+
Sujet clos
Aller à