Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

.addEventListener('click', function() {alert("TEST!"); } , false);

4 views
Skip to first unread message

Pim

unread,
Nov 23, 2009, 4:08:58 PM11/23/09
to
Bonsoir,

Je ne peut faire fonctionner ce code sous ce navigateur:
Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.13) Gecko/2009082121
Iceweasel/3.0.6 (Debian-3.0.6-1)

Je souhaite ajouter un ￜvￜnement 'click' ￜ une balise du type :
<div id="xx">taratata</div>, mais la balise n'est pas
dans le fichier HTML : Elle est crￜￜe en DOM.

Voiï¿œi ce que fait le code en gros:

//Creation d'un <div id=fs>[< Agrandir >]</div>
var anewdiv = document.createElement('div');
anewdiv.id='fs';
anewdiv.innerHTML="[< Agrandir >]";

//Maintenant mise en place d'un gestionnaire d'Ev sur ce div
var evType = 'click';
if (anewdiv.addEventListener){//Mozilla ￜ firefox ￜ
alert("Mozilla");
anewdiv.addEventListener(evType, function() {alert("TEST!"); } , false);
return true;
}
else if (anewdiv.attachEvent){//IE
alert("IE");
var r =
anewdiv.addEventListerner( "on" + evType, function() { alert("TEST!");});
return r;
}
else {
alert("Impossible de brancher un gestionaire d'ï¿œvï¿œnements");
return false;//branchement impossible
}

#Ajout de l'ￜlￜment ￜ la page
var beforeElement = document.getElementById("topmenu");
var theParent = beforeElement.parentNode;
theParent.insertBefore(anewdiv, beforeElement);

Le code marche avec IE (je n'ai pas la version) mais pas avec ma version
de firefox.
Avec Firefox, aucune erreur n'est retournï¿œe et le gestionnaire d'Ev semble
ï¿œtre mis en place,mais le fait de cliquer dans le div ne semble pas opï¿œrer.
Aucune erreur dans les traces JavaScript non plus.

Je vous remercie par avance de votre Aide.

Pascal

unread,
Nov 23, 2009, 4:42:18 PM11/23/09
to
Pim a écrit :
> Bonsoir,

Bonsoir,

> Je ne peut faire fonctionner ce code sous ce navigateur:
> Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.13) Gecko/2009082121
> Iceweasel/3.0.6 (Debian-3.0.6-1)


J'ai testé avec FF3 sous Windows XP, et le code suivant fonctionne
normalement (je n'ai gardé que la partie FF) :

<body>
<h1>addEventListener</h1>
<p id="test">blabla</p>
<script type="text/javascript">
// Creation d'un <div id=fs>[< Agrandir >]</div>


var anewdiv = document.createElement('div');
anewdiv.id='fs';
anewdiv.innerHTML="[< Agrandir >]";

// Maintenant mise en place d'un gestionnaire d'Ev sur ce div
var evType = 'click';
anewdiv.addEventListener("click",


function() {alert("TEST!")}, false);

// Ajout de l'élément à la page
var beforeElement = document.getElementById("test");


var theParent = beforeElement.parentNode;
theParent.insertBefore(anewdiv, beforeElement);

</script>
</body>

Cordialement,
Pascal

Pim

unread,
Nov 23, 2009, 5:02:35 PM11/23/09
to
Le Mon, 23 Nov 2009 22:42:18 +0100,
Pascal <poncet.d...@gmail.dot.com> disait ceci :
> Pim a ï¿œcrit :

>> Bonsoir,
>
> Bonsoir,
>
>> Je ne peut faire fonctionner ce code sous ce navigateur:
>> Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.13) Gecko/2009082121
>> Iceweasel/3.0.6 (Debian-3.0.6-1)
>
>
> J'ai testￜ avec FF3 sous Windows XP, et le code suivant fonctionne
> normalement (je n'ai gardￜ que la partie FF) :

>
><body>
> <h1>addEventListener</h1>
> <p id="test">blabla</p>
> <script type="text/javascript">
> // Creation d'un <div id=fs>[< Agrandir >]</div>
> var anewdiv = document.createElement('div');
> anewdiv.id='fs';
> anewdiv.innerHTML="[< Agrandir >]";
> // Maintenant mise en place d'un gestionnaire d'Ev sur ce div
> var evType = 'click';
> anewdiv.addEventListener("click",
> function() {alert("TEST!")}, false);
> // Ajout de l'ￜlￜment ￜ la page

> var beforeElement = document.getElementById("test");
> var theParent = beforeElement.parentNode;
> theParent.insertBefore(anewdiv, beforeElement);
> </script>
></body>
>
> Cordialement,
> Pascal
Merci d'avoir testￜ pour moi.
je regarde.....

Pim

unread,
Nov 23, 2009, 5:25:48 PM11/23/09
to
Le Mon, 23 Nov 2009 22:42:18 +0100,
Pascal <poncet.d...@gmail.dot.com> disait ceci :
> Pim a ï¿œcrit :
>> Bonsoir,
>
> Bonsoir,
>
>> Je ne peut faire fonctionner ce code sous ce navigateur:
>> Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.13) Gecko/2009082121
>> Iceweasel/3.0.6 (Debian-3.0.6-1)
>
>
> J'ai testￜ avec FF3 sous Windows XP, et le code suivant fonctionne
> normalement (je n'ai gardￜ que la partie FF) :

>
><body>
> <h1>addEventListener</h1>
> <p id="test">blabla</p>
> <script type="text/javascript">
> // Creation d'un <div id=fs>[< Agrandir >]</div>
> var anewdiv = document.createElement('div');
> anewdiv.id='fs';
> anewdiv.innerHTML="[< Agrandir >]";
> // Maintenant mise en place d'un gestionnaire d'Ev sur ce div
> var evType = 'click';
> anewdiv.addEventListener("click",
> function() {alert("TEST!")}, false);
> // Ajout de l'ￜlￜment ￜ la page

> var beforeElement = document.getElementById("test");
> var theParent = beforeElement.parentNode;
> theParent.insertBefore(anewdiv, beforeElement);
> </script>
></body>
>
> Cordialement,
> Pascal
>
Effectivement!
En fait le code js est bon et fonctionne!!!
C'est du ￜ la propriￜtￜ de mon div dans mon fichier css.
La zone de click doit ï¿œtre dï¿œcallï¿œe ou masquï¿œe
et en la mettant en relative
j'arrive ￜ cliquer dessus mais c'est pas top.
Voici les propriï¿œtes du <div id="fs">:

Je met en asolute car relative me fait
n'importe quoi sous IE.
Bon j'ai un msie.css que je peux ajuster.
#fs {
border: 1px solid red;
width: 8em;
right: 5px;
position: absolute;
top: 2.9em;
height: 1em;
background-color: #F0F0CC;
display: block;
font-size: 0.7em;
text-align:center;
}

Que pourrait-ton faire pour que cela soit plus catholique?
(doit marcher avec IE et FF).
Merï¿œi Pascal.

Jean-Yves.

SAM

unread,
Nov 23, 2009, 9:09:06 PM11/23/09
to
Le 11/23/09 11:25 PM, Pim a ï¿œcrit :

> En fait le code js est bon et fonctionne!!!
> C'est du ￜ la propriￜtￜ de mon div dans mon fichier css.
> La zone de click doit ï¿œtre dï¿œcallï¿œe ou masquï¿œe
> et en la mettant en relative
> j'arrive ￜ cliquer dessus mais c'est pas top.

Et pourquoi un relative ne serait pas 'top' ?

> Voici les propriï¿œtes du <div id="fs">:
>
> Je met en asolute car relative me fait
> n'importe quoi sous IE.

Que veut dire "n'importe quoi" ?

Quel est le contexte ?

Est-ce qu'il y a seulement un doctype sur cette page ?
Et le code HTML employￜ est-il conforme ￜ ce doctype ?

Sinon le brouteur (et en particulier IE) passe en quirksmode
(en traitement de soupe de balises, un peu n'importe quoi, quoi)

> Bon j'ai un msie.css que je peux ajuster.
> #fs {
> border: 1px solid red;
> width: 8em;
> right: 5px;
> position: absolute;
> top: 2.9em;
> height: 1em;
> background-color: #F0F0CC;
> display: block;
> font-size: 0.7em;
> text-align:center;
> }
>
> Que pourrait-ton faire pour que cela soit plus catholique?

Sans le reste de la page on ne peut qu'affabuler (ou tout au moins
imaginer)

> (doit marcher avec IE et FF).

et Opera, et Safari, et toutes versions des sus-nommï¿œs.
(il nous sera fait grace de IE.5.5 ? Fx.0.9 ? Safari.1.2 ? Opera.6 ?)

En tous cas, mon essai fonctionne impec avec mes :
IE (5.5, 6, 7) Fx3, Safari4, Opera9.6
voir:
<http://cjoint.com/?lycVM42bbZ>
<http://cjoint.com/data/lycVM42bbZ_ajou.htm>

On peut bien mettre la classe 'fs' ￜ position: absolute;
qui contente aussi tous navigateurs.
Mï¿œzalorsse ...
ￜ quoi bon s'embￜter ￜ insￜrer le div "before" un autre truc ?
Autant l'appendChilder au body.


Nota:
il sera "plus propre" (et logique?)
de n'ajouter l'ￜcouteur qu'ￜ la fin :

function ajouter(lieuId) {
// fonction commune IE et autres d'ajout d'ï¿œvï¿œnement
var adEcoute = function(obj, evenement, action) {
(obj.attachEvent)?
obj.attachEvent('on'+evenement, action) :
(obj.addEventListener)?
obj.addEventListener(evenement, action, false) :
alert('Ajout d\'ï¿œcouteur impossible');
}
// Creation d'un div: class=fs [< Agrandir >]


var anewdiv = document.createElement('div');

anewdiv.className = 'fs';
anewdiv.innerHTML = "[< Agrandir >]";


// Ajout de l'ￜlￜment ￜ la page

var beforeElement = document.getElementById(lieuId);


var theParent = beforeElement.parentNode;
theParent.insertBefore(anewdiv, beforeElement);

// Maintenant mise en place d'un gestionnaire d'Ev sur ce div

adEcoute(anewdiv, 'click', function(){alert('Test');});
}


--
sm

SAM

unread,
Nov 24, 2009, 3:01:09 AM11/24/09
to
Le 11/24/09 3:09 AM, SAM a ï¿œcrit :

>
> Nota:
> il sera "plus propre" (et logique?)
> de n'ajouter l'ￜcouteur qu'ￜ la fin :

D'ailleurs peut-on vraiment appeler ï¿œa un "ï¿œcouteur"
quand un simple 'onQqueChose' suffit :

var adEcoute = function(obj, evenement, action) {

obj['on'+evenement] = action;
}

fera bien le mï¿œme boulot que le longuet :

> var adEcoute = function(obj, evenement, action) {
> (obj.attachEvent)?
> obj.attachEvent('on'+evenement, action) :
> (obj.addEventListener)?
> obj.addEventListener(evenement, action, false) :
> alert('Ajout d\'ï¿œcouteur impossible');
> }


function ajouter(lieuId) {


var anewdiv = document.createElement('div');
anewdiv.className = 'fs';
anewdiv.innerHTML = "[< Agrandir >]";

// fonction commune IE et autres d'ajout d'ï¿œvï¿œnnement


var adEcoute = function(obj, evenement, action) {

obj['on'+evenement] = action;


}
// Ajout de l'ￜlￜment ￜ la page
var beforeElement = document.getElementById(lieuId);

beforeElement.parentNode.insertBefore(anewdiv, beforeElement);


// Maintenant mise en place d'un gestionnaire d'Ev sur ce div
adEcoute(anewdiv, 'click', function(){alert('Test');});

/********
* ou :
* anewdiv.onclick = function(){alert('Test');});
*
**************************************************/
}


--
sm

Olivier Miakinen

unread,
Nov 24, 2009, 5:33:15 AM11/24/09
to
Bonjour,

Le 24/11/2009 09:01, SAM a ï¿œcrit :
>
> var adEcoute = [...]
>
> [...]


> adEcoute(anewdiv, 'click', function(){alert('Test');});

Je sais que tu es ￜ peu prￜs aussi ￜ l'aise que moi avec l'anglais, mais
ￜ ta place j'ￜcrirais ￜ add ￜ plutￜt que ￜ ad ￜ : on ajoute un ￜcouteur
plutï¿œt que d'ï¿œcouter des pubs !

Cordialement,
--
Olivier Miakinen

SAM

unread,
Nov 24, 2009, 6:39:21 AM11/24/09
to
Le 11/24/09 11:33 AM, Olivier Miakinen a ï¿œcrit :

ne dit-on pas 'adjuvant' ?
(pour dￜsigner un produit ajoutￜ)

J'aurais peut-ￜtre dￜ prￜfￜrer 'adjonction'

J'anglicise trï¿œs rarement mes noms de variables ou de fonctions,
'anewdiv' est un reliquat du script original.

Si j'eus anglicisￜ c'eￜt pￜt ￜtre : addLookAt
par exemple

> Cordialement,

Toutafￜ

--
sm

Pim

unread,
Nov 24, 2009, 6:51:41 AM11/24/09
to
Le Tue, 24 Nov 2009 03:09:06 +0100,
SAM <stephanemor...@wanadoo.fr.invalid> disait ceci :

> Le 11/23/09 11:25 PM, Pim a ï¿œcrit :
>> En fait le code js est bon et fonctionne!!!
>> C'est du ￜ la propriￜtￜ de mon div dans mon fichier css.
>> La zone de click doit ï¿œtre dï¿œcallï¿œe ou masquï¿œe
>> et en la mettant en relative
>> j'arrive ￜ cliquer dessus mais c'est pas top.
>
> Et pourquoi un relative ne serait pas 'top' ?
A voir, je ne suis pas butￜ.

>> Voici les propriï¿œtes du <div id="fs">:
>>
>> Je met en asolute car relative me fait
>> n'importe quoi sous IE.
>
> Que veut dire "n'importe quoi" ?
>
> Quel est le contexte ?
Vraiment, ce serait trop long ￜ expliquer...

>
> Est-ce qu'il y a seulement un doctype sur cette page ?
OUI! HTML 4.0

> Et le code HTML employￜ est-il conforme ￜ ce doctype ?
A voir ... conformitￜ W3C et tous le touitouin.
>
> [ ... ]

> et Opera, et Safari, et toutes versions des sus-nommï¿œs.
> (il nous sera fait grace de IE.5.5 ? Fx.0.9 ? Safari.1.2 ? Opera.6 ?)
>
> En tous cas, mon essai fonctionne impec avec mes :
> IE (5.5, 6, 7) Fx3, Safari4, Opera9.6
C'est vrai! => Une armada d'ordinateurs chez soi, ou d'os virtualisï¿œs?

> voir:
><http://cjoint.com/?lycVM42bbZ>
><http://cjoint.com/data/lycVM42bbZ_ajou.htm>
Merￜi beaucoup d'avoir testￜ pour moi.
J'ai trouvￜ ce qui ne va pas:
Le problï¿œme vient tout simplement du fait
qu'une zone de div recouvre le div "fs" et qu'on ne peut
cliquer sur le div pour cette raison.

> On peut bien mettre la classe 'fs' ￜ position: absolute;
> qui contente aussi tous navigateurs.
C'est ce que j'ai pu constater.

> Mï¿œzalorsse ...
> ￜ quoi bon s'embￜter ￜ insￜrer le div "before" un autre truc ?
> Autant l'appendChilder au body.
C'est notￜ, merￜi.

>
>
> Nota:
> il sera "plus propre" (et logique?)
> de n'ajouter l'ￜcouteur qu'ￜ la fin :
Merï¿œi aussi pour cette information.
>
>[ ...]
>
>
Merï¿œi beaucoup pour toutes ces informations.
Je vais les analyser tranquillement.

> --
> sm

Olivier Miakinen

unread,
Nov 24, 2009, 6:57:22 AM11/24/09
to
Le 24/11/2009 12:39, SAM a ï¿œcrit :
>>
>>> var adEcoute = [...]
>>
>> Je sais que tu es ￜ peu prￜs aussi ￜ l'aise que moi avec l'anglais, mais
>> ￜ ta place j'ￜcrirais ￜ add ￜ plutￜt que ￜ ad ￜ : on ajoute un ￜcouteur
>> plutï¿œt que d'ï¿œcouter des pubs !
>
> ne dit-on pas 'adjuvant' ?
> (pour dￜsigner un produit ajoutￜ)

Ah, d'accord. Mais dans ce cas il peut ï¿œtre utile de savoir comment on
forme des abrï¿œviations en franï¿œais (abrï¿œviations dites rï¿œguliï¿œres, pas
conventionnelles ni fautives) : en coupant aprï¿œs une consonne *et* avant
une voyelle. Cette rï¿œgle facilite la lecture des abrï¿œviations, mï¿œme pour
ceux qui ne la connaissent pas explicitement ! Et donc, on
peut abrￜger ￜ adjuvant ￜ en ￜ adjuv. ￜ ou ￜ adj. ￜ (sauf dans une
grammaire oￜ cela signifie ￜ adjectif ￜ) mais pas en ￜ ad ￜ.

Si tu en as le courage, tu peux lire :
http://www.orthotypographie.fr/volume-I/abreviations-01.html
(je mets surtout le lien pour les passionnï¿œs de typographie car c'est un
peu technique...)

> J'aurais peut-ￜtre dￜ prￜfￜrer 'adjonction'

Pourquoi pas adjEcoute(), voire ajEcoute() pour ￜ ajout d'ￜcoute ￜ ?

>> Cordialement,
>
> Toutafￜ

Pas mieux

--
Olivier Miakinen

Pim

unread,
Nov 24, 2009, 8:02:04 AM11/24/09
to
Le 23 Nov 2009 21:08:58 GMT,
Pim <m...@free.fr> wrote this :

Subject closed: my div clicked zone was hidden by another div.

Thank you very much.
Pim

--
NB: I hate football, and all it represents!

SAM

unread,
Nov 24, 2009, 11:35:47 AM11/24/09
to
Le 11/24/09 12:51 PM, Pim a ï¿œcrit :

> Le Tue, 24 Nov 2009 03:09:06 +0100,
> SAM <stephanemor...@wanadoo.fr.invalid> disait ceci :
>
> Le problï¿œme vient tout simplement du fait
> qu'une zone de div recouvre le div "fs" et qu'on ne peut
> cliquer sur le div pour cette raison.

Ha! ha! ... que ne disais-je ? Le contexte !

>> Mï¿œzalorsse ...
>> ￜ quoi bon s'embￜter ￜ insￜrer le div "before" un autre truc ?
>> Autant l'appendChilder au body.
> C'est notￜ, merￜi.

D'autant qu'alors, totomatiquement, ï¿œa doit rï¿œsoudre ton histoire de div
sous-dessus puisque le dernier enfant du body prend le z-index maximal
(il est au-dessus de tout le reste)

>> Est-ce qu'il y a seulement un doctype sur cette page ?
> OUI! HTML 4.0

Ce n'ￜtait pas acquis d'avance vu le bout de code proposￜ.

>> En tous cas, mon essai fonctionne impec avec mes :
>> IE (5.5, 6, 7) Fx3, Safari4, Opera9.6
> C'est vrai! => Une armada d'ordinateurs chez soi, ou d'os virtualisï¿œs?

un IE-Testeur (4 IEs en un seul) dans une MV XP
les autres sous Mac.
(bientￜt un Safari-testeur, de la 1.x ￜ la 3.x)

--
sm

0 new messages