11548 sujets

JavaScript, DOM et API Web HTML5

Ceci est une suite pour ceux qui ont suivi de mon parcour d'objet.
Racpitulon :
J'ai plusieurs images sur une page web imbriqué dans des liens.
En javascript, j'assigne un evenement 'click' a ces liens pour ouvrir une popup
l'attribut href du lien pointe sur le lien de la page (au cas ou javascript n'est pas activé)
Voici donc la fonction appelé lorsque l'on clique sur un de ces liens :


function open_popup(e)
{
	e = getStandardEvent(e);
	e.cancelBubble = true; // IE
	e.preventDefault();
	e.stopPropagation();
	window.open(this.getAttribute('href'), '_blank');
	return (false);
}

function getStandardEvent(e)
{
 // abstraction pour recuperer un objet standard pour l'evenement en cours 
 // comprend le modele DOM standard et le modele proprietaire de MSIE
 // e : parametre recu lors de l'appel du gestionnaire d'evenement 
 // retour : objet d'evenement standard
 if (e == null && window.event) {
   // cas particulier de MSIE pour recuperer l'evenement en cours
   e = window.event ;
 }
 if (e.target == null && e.srcElement) {
   // cas particulier de MSIE pour recuperer la balise DOM cible
   e.target = e.srcElement ;
 }
 if (! e.preventDefault ){
   // cas particulier de MSIE pour empecher l'action par defaut du navigateur
   e.preventDefault = function () { this.returnValue = false ; } ;
 }
 return e ;
}




Le probleme est que IE 6 n'arrete pas la propagation et que le click sur le lien ouvre la page sur laquel il pointe (et n'effectue pas le window.open)
Bref, comme si IE ne lisait pas le JS, alors que ca roule sous firefox

quelqu'un sait comment faire ?
Modifié par nORKy (18 Aug 2006 - 09:52)
Bonjour,

Ton code me parait un peu compliqué pour ce que tu veux faire. Je ne sais pas comment tu appelles ta fonction open_popup - il faudrait que tu mettes aussi l'appel à cette fonction - ni si tu as un système d'évènement mais à quoi te sers e en l'occurrence ?

Ceci devrait être suffisant si tu n'utilises aucune propriété de event:

function open_popup()
{
     window.open(this.getAttribute('href'));
     return false;
}


a+
dunjl a écrit :
Bonjour,

Ton code me parait un peu compliqué pour ce que tu veux faire. Je ne sais pas comment tu appelles ta fonction open_popup - il faudrait que tu mettes aussi l'appel à cette fonction - ni si tu as un système d'évènement mais à quoi te sers e en l'occurrence ?

Ceci devrait être suffisant si tu n'utilises aucune propriété de event:

function open_popup()
{
     window.open(this.getAttribute('href'));
     return false;
}


a+


Ca ne fonctionne pas ca, c'est pour que j'ai rajouter un appel a stopropagation(). Cette fonction marche sous FF mais pas IE

Ma fonction open_popup se lance quand on a un evenement onclick sur un lien
a écrit :
Ma fonction open_popup se lance quand on a un evenement onclick sur un lien

Je te remercie j'avais bien compris Smiley cligne

a écrit :
Ca ne fonctionne pas ca

C'est-à-dire: rien ne se passe? message d'erreur? freeze du navigateur ?

Essaie d'être plus précis dans l'énoncé de ton problème, et également peux-tu mettre le code où tu appelles la fonction open_popup stp

a+
oui, pardon, je suis pas clair Smiley cligne
Ce que je veux dire, c'est que le 'return false' ne sert à rien, il ne stoppe pas la propagation puisque le lien s'ouvre de manière classique (comme si mon javascript n'était pas utilisé)

le code ou est appelé open_popup ??
beh, c'est un lien html :

<a href="user.php?eid=1&uid=37"><img src="img/print.png" alt="Imprimer" title="Imprimer" /></a>


j'ai au chargement de ma page un code qui link la function de ma popup sur l'evenement onclick de la balise A
Par contre, avec stopPropagation, ca fonction sous FF, le lien n'est pas activé et ma popup s'ouvre.
Là c'est moi qui me suis mal exprimé Smiley cligne

Ce que j'aimerais que tu postes, c'est le code où tu affectes 'onclick' à tes éléments parce que le code que j'ai mis avant, je l'utilises et je n'ai pas de soucis.


a+
Modérateur
Salut,

nORKy a écrit :
Ca ne fonctionne pas ca

Si si, le code de dunjl fonctionne très bien.

Tiens, voici un exemple qui s'en sert... une page où on ne metterait qu'un lien...

function open_popup()
{
     window.open(this.getAttribute('href'));
     return false;
}
function test()
{
	var oA = document.getElementsByTagName('a')[0];
	oA.onclick = open_popup;
}
window.onload = test;

Tu devrais essayer... Smiley smile
Modifié par koala64 (17 Aug 2006 - 19:58)
Bonjour,
dunjl et koala 64 ont raison, "return false" sert à désactiver l'action du lien html pour que seule la popup soit ouverte.

hors sujet : Pour simplifier, j'emploie plutôt :
window.open([#red]this.href[/#]);

En quoi j'ai tord d'utiliser le langage objet du javascript au lieu de son équivalent DOM ?
Modifié par chmel (18 Aug 2006 - 00:59)
Modérateur
Salut,

chmel a écrit :
hors sujet : Pour simplifier, j'emploie plutôt :
window.open([#red]this.href[/#]);

En quoi j'ai tord d'utiliser le langage objet du javascript au lieu de son équivalent DOM ?

Il n'y a aucun tort, les deux fonctionnent. Smiley cligne C'est plus une question de goût.

Personnellement, je me suis habitué aux méthodes DOM simplement parce que lorsque j'ai commencé, celles-ci me donnaient la possibilité d'accéder à n'importe quel élément sans avoir tous les "raccourcis" à apprendre et depuis, c'est resté. Smiley biggrin
Et bien, avec ca, toujours le meme probleme, ca n'a aucun effet sur mon IE ! (version 6 - windows 2000) et fonctionne correctement sous FF

voici donc ce qui se passe sur ma page

- une fois chargé(onload) voici le script qui est appelé :
Je parcours mes images pour trouver les bon liens à 'enregistrer'

function popup_init()
{
	images = document.getElementsByTagName('img');
	for (im = 0; im < images.length ; im++) {
		if (images[im].alt == "Imprimer") {
    		linka = images[im].parentNode;
		    if (!linka.tagName)
		    	linka = linka.parentNode;// Gecko
    		//addEvent(linka, "click", open_popup);
    		linka.onclick = open_popup;
		}
	}
}


La fonction open_popup :

function open_popup()
{
	window.open(this.getAttribute('href'), '_blank');
	return false;
}


PS : vivement que IE 7 soit répendu pour que nous n'ayons plus ce genre de probleme !!
laisser tomber, j'ai trouver le prob !
Rien a voir avec ce code !

Au depart, quand j'ai commencé a developpé, j'ai oublié de tester avec IE car j'utilse FF. Et comme j'ai l'habitude d'utiliser des png, je me suis retrouvé avec des defauts à mes pngs sous IE. Pour eviter d'avoir à refaire mes templates, j'ai utiliser un 'fix' javascript (qui fonctionne très bien d'ailleurs).
Hors, ce fix modifie les balises img ! il les transformes en span !
Donc, sous IE, je n'ai tout simplement aucun evenement qui sont rataché puisque pas de balise img !

désolé de vous avoir embeter pour rien !
honte sur moi
Cool tant mieux pour toi ...

a écrit :
j'ai utiliser un 'fix' javascript (qui fonctionne très bien d'ailleurs).
d'où l'utilité de mettre la totalité du code Smiley cligne

bon courage pour la suite
Bonjour tout le monde,
j'ai un p'tit soucis et comme je penses que la solution de tient près des gestionnaire d'évenement, c'est pour ca que je répond ici.

Voila, en fait, en fait, j'essai de faire un truc un peu comme une Grille Excel, un tableau donc, qui, quand on déplace la ligne séparatrices verticale, permet d'élargire ou de diminuer la largeur des colonnes. Le script pour faire tout ca fonctionne correctement. Mon problème est le suivant: La ligen séparatrice en question est en fait une image. Le MouseDown sur cette image déclenche l'enregistrement de la position X du curseur et l'activation du redimensionnement; le MouseMove calcul l'écart en la position courante et la position initiale (catcher sur le mouseDown) et applique cette différence à la taille de la colonne, enfin, le MouseUp, finalise le redimensionnement. Ca ca marche ! Par contre, mon problème est que sous IE et sous FF, quand je fais un MouseDown sur l'image et que je déplace mon curseur, ca fait comme si j'essayer de "sélectionner" l'image (fait un test, aller sur une page web, prenez une image, cliquer dessus, laisser cliquer et déplacer la souris, au bout de quelques pixels, vous aurez le curseur qui va se transofrmer en un rond barré), et du coup je suis obligé de relacher ma souris, mais comme ce MouseUp n'est pas sur l'image directement (il est intercepter par cet évenement "parasite" qui m'embete), ma fonction n'est pas enclenché, je suis obligé de cliquer (down et up) une nouvelle fois pour activer ma fonction (je sais pas si je suis très clair....)

J'ai bien essayer de faire un stopPropagation() et un cancelBuble(), mais ca ne change rien....quelqu'un aurait une idée svp ?

merci

NiHaoMa