Partage

addeventlistener

1 2 >>

Sujet résolu

1 septembre 2010 à 11:45:12

Bonjour !

Voila mon code :

<html>
<head>
<script type="text/javascript">
function action(eff)
{
     alert(eff);
}
function addevent(eff)
{
     document.addEventListener('click', action(eff), false);
}
</script>
</head>
<body>
<a href="#" onclick="addevent('coucou');">lien</a>
</body>
</html>

le problème est que la fonction action est déclenchée dés le clic sur le lien alors que je voudrais que la fonction se déclenche aprés un autre clic que celui sur le lien ...

quelqu'un peut m'aider ?

nightmat

1 septembre 2010 à 12:05:25

Houlà tu nous fais un mix des bonnes pratiques et du code des années 2000 là !
http://www.alsacreations.com/article/l [...] vaScript.html

Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.

Almandin

1 septembre 2010 à 12:12:04

je ne comprend pas ton message ??? mon code est mauvais, il ne respecte pas les bonnes pratiques c'est ça ?

nightmat

1 septembre 2010 à 12:26:40

Oui ton code est mauvais, tu confonds création et déclenchement. Lis mon lien pour savoir comment faire

Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.

Almandin

1 septembre 2010 à 12:56:07

je ne comprend toujours pas comment faire malgré la lecture de ton lien, je trouve le tuto assez peu explicite, il indique bien qu'est ce qui sert a quoi, mais pas vraiment la maniere de l'utiliser concretement, ou alors j'ai raté quelque chose.

La simple utilisation de la fonction addeventlistener ne suffit pas ?

nightmat

1 septembre 2010 à 13:55:45

En fait addEventListener remplace entre autres le onclick dans les bonnes pratiques...

Et concernant ta signature au fait c'est "Au temps pour moi" la vraie expression

Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.

Almandin

1 septembre 2010 à 14:39:50

je suis toujours dans le flou total, addEventListener remplace onclick ... comment ? onclick se place sur l'objet a cliquer, addeventlistener dans un script, je voudrais m'en servir pour qu'on puisse cliquer sur l'ensemble du body, puis en cliquant on supprime la possibilité de cliquer sur le body et on lance une fonction tierce ...

désolé mais là, tes explications me suffisent pas

<hs title="signature">
Je suis allé sur wikipedia, la vraie expression est bien au temps pour moi, je modifie ma signature, mais je soutient le fait que ça ne veut absolument rien dire a moins de se trouver dans une parade militaire en exerçant un salut et rater un temps sur l'enchainement.
</hs>

nightmat

1 septembre 2010 à 14:47:12

Tu n'as pas du lire le lien, tout est clairement expliqué.
Pour t'orienter les attributs onclick et cie ne doivent plus apparaître dans du code html.

<hs>
Oui mais beaucoup d'expression dérivent de vocabulaire spécifique

</hs>

Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.

Almandin

1 septembre 2010 à 14:48:47

j'ai tout lu sauf les questions de compatibilités avec ie,
si le onclick n'apparait plus dans le html, comment le lien appel la fonction js ? ...

nightmat

1 septembre 2010 à 14:57:00

Avec addEventListener ><

Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.

Almandin

1 septembre 2010 à 15:00:13

nan mais je veut dire, il faut bien définir dans le html quelque chose qui appel une fonction, je fait comment sinon ? je met addEventListener="click, fonction, false" je suis désolé mais tu pourrait etre plus explicite que de me donner 2 mots par message lol

nightmat

1 septembre 2010 à 15:06:31

Tout est expliqué dans le lien en même temps ; tu n'as pas l'air de comprendre que javascript peut (et doit même) être totalement dissocié du html. addEventListener permet d'ajouter un événement à un élément html et c'est tout !

Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.

Almandin

1 septembre 2010 à 15:25:13

l'événement peut être "intercepté" par addeventlistener ?

nightmat

1 septembre 2010 à 15:26:29

C'est son rôle oui, tu dois lui passer en paramètre une fonction qui sera exécutée lorsque l'événement surviendra.

Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.

Almandin

1 septembre 2010 à 15:30:35

<html>
<head>
<script type="text/javascript">
function action()
{
     alert("test");
}
document.getElementById('bloc').addEventListener("click", action(), false);
</script>
</head>
<body>

<a href="#" id="bloc">test</a>

</body>
</html>

ce code ne fait rien lors du clic

qu'est ce que j'ai raté ?

nightmat

1 septembre 2010 à 15:32:57

Deux choses : premièrement le DOM doit être construit pour récupérer des éléments, et ensuite une fonction se passe en paramètre sans parenthèses.

Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.

Almandin

1 septembre 2010 à 15:34:59

le dom doit etre construit, c'est a dire ?

HerrRox

1 septembre 2010 à 17:36:55

Citation : Almandin

le dom doit etre construit, c'est a dire ?

Dans ton code actuel, document.getElementById('bloc') va etre interprete comme n'existant pas (Comme la plupart des humains, la page est lu de haut en bas par le navigateur, et comme ton lien avec l'id 'bloc' est situe apres ton document.getElementById, le navigateur n'a pas encore pris connaissance de celui-ci).

Bref, attendre que le DOM soit construit veut dire 'en gros' attendre que la page soit chargee (je dis en gros car il y a une nuance mais la n'est pas le probleme pour l'instant ^^).

Pour attendre que la page soit chargee, ajoute un window.onload comme ceci :

window.onload = function(){document.getElementById('bloc').addEventListener('click', action, false)};

Almandin

1 septembre 2010 à 17:41:25

effectivement ça marche, sinon pour revenir a ma question initiale, comment je pourrais me débrouiller pour :

0. le body n'est pas cliquable
1. je clic sur le lien, le body devient cliquable
2. je clic quelque part sur le body, je récupere l'endroit du clic et le body n'est plus cliquable.

en tout cas merci tout les deux pour vos réponses

HerrRox

1 septembre 2010 à 17:47:07

Tout comme tu as une fonction addEventListener, tu as une fonction removeEventListener.

Ensuite, pour ce que est de recuperer la position de la souris au moment du clic, regarde du cote de event.pageX, event.pageY (ou event.clientX et event.clientY si tu es sous IE)

Almandin

1 septembre 2010 à 17:50:21

d'ac, mais sinon pour l'instant je sais juste déclencher une fonction au clic sur le lien, comment faire pour qu'au clic sur le lien une fonction se déclenche au clic sur le body ?

HerrRox

1 septembre 2010 à 18:01:44

Tu pourrais essayer de chercher un peu quand meme, c'est pas bien complique ...

Une petite piste : pour recuperer l'element body, tu fais document.body. Puis dans ta fonction action, tu ajoutes un eventListener sur cet element...

Attention, ton lien etant forcement dans le body, la fonction qui se declenchera lorsque tu cliqueras sur le body se declenchera aussi lorsque tu cliqueras sur le lien

Almandin

1 septembre 2010 à 18:06:33

edit de chez edit :

en fin de compte je me retrouve avec ce code :

<html>
<head>
<script type="text/javascript">
function action()
{
     alert("coucou");
     document.body.removeEventListener('click', action, false);
}
function passerelle(event)
{
     onmouseup = function()
{document.body.addEventListener('click', action, false)};
}
window.onload = function(){document.getElementById('bloc').addEventListener('click', passerelle, false)};

</script>
</head>
<body>

<a href="#" id="bloc">test</a>
<div style="width: 100px; height: 100px; background-color: grey;"></div>
</body>
</html>

un clic sur le lien permet de cliquer sur le body ce qui déclenche la fonction action, le problème est maintenant qu'il est toujours possible de déclencher action en cliquant sur le body, malgré le

document.body.removeEventListener('click', action, false);

lifaon74

1 septembre 2010 à 18:21:43

personnellement, les bonnes pratique je m'en fou complètement surtout qu'avec IE ont se fait super chier a les respecter!

pour ton code comme je suis gentil (et il en faut

<html>
<head>
<script type="text/javascript">
var a=false;
function action()
{
if(a)
{
//ici tu met le code a executer
}
a=true;
}
</script>
</head>
<body>
<a href="#" onclick="action();">lien</a>
</body>
</html>

Almandin

1 septembre 2010 à 18:25:34

o la ruse de sioux !
en plus ton code doit probablement etre compatible ie lol, t'utilise aucune fonction a part onclick qui marche sur tout les navigo lol

edit : a ba non, ça peut pas marcher, il faut recliquer sur le lien pour que ça fonctionne :s

sinon j'ai trouver, cf mon message précédent

HerrRox

1 septembre 2010 à 18:32:36

function passerelle(event)
{
		setTimeout(function(){document.body.addEventListener('click', action, false)},100);
}

lifaon74

1 septembre 2010 à 18:37:09

eh bien

<html>
<head>
<script type="text/javascript">
var a=false;
function action()
{
if(a)
{
//ici tu met le code a executer
}
}
</script>
</head>
<body onclick="action();">
<a href="#" onclick="a=true">lien</a>
</body>
</html>

Almandin

1 septembre 2010 à 18:44:35

c'est pas les idées qui te manquent

mais je préfere ma technique, ça permet d'éviter de lancer la fonction a chaque clic sur la page

lifaon74

1 septembre 2010 à 19:06:34

le navigateur se fou complètement des fonctions qu'il utilise et ce même en boucle... ça lui prend que 1/1 000 000 de seconde alors....(pour le onclick).

Almandin

1 septembre 2010 à 19:09:45

en fin de compte je me retrouve avec ce code :

<html>
<head>
<script type="text/javascript">
function action()
{
     alert("coucou");
     document.body.removeEventListener('click', action, false);
}
function passerelle(event)
{
     onmouseup = function()
{document.body.addEventListener('click', action, false)};
}
window.onload = function(){document.getElementById('bloc').addEventListener('click', passerelle, false)};

</script>
</head>
<body>

<a href="#" id="bloc">test</a>
<div style="width: 100px; height: 100px; background-color: grey;"></div>
</body>
</html>

document.body.removeEventListener('click', action, false);

j'aimerais qu'il ne soit possible de cliquer qu'une seule fois, aprés cela le body n'est plus clicable

1 2 >>