Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

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

11 réponses
Avatar
Pim
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.

10 réponses

1 2
Avatar
Pascal
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
Avatar
Pim
Le Mon, 23 Nov 2009 22:42:18 +0100,
Pascal 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.....
Avatar
Pim
Le Mon, 23 Nov 2009 22:42:18 +0100,
Pascal 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.
Avatar
SAM
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
Avatar
SAM
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
Avatar
Olivier Miakinen
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
Avatar
SAM
Le 11/24/09 11:33 AM, Olivier Miakinen a écrit :
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 !



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
Avatar
Pim
Le Tue, 24 Nov 2009 03:09:06 +0100,
SAM 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


Avatar
Olivier Miakinen
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
Avatar
Pim
Le 23 Nov 2009 21:08:58 GMT,
Pim 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!
1 2