11550 sujets

JavaScript, DOM et API Web HTML5

Evenements onclick onmouseover,selection dans un tableau,dom...

Bonjour, je suis en train de realiser un calendrier de reservation et je souhaite pouvoir modifier le calendrier directement, selectionner une serie de champs comme on le fait sur un tableur,chaque td possede un id unique je souhaite coder moi meme cela. Je bute un peut sur la façon de gerer ça n' ayant jamais codé ce genre de chose, comment faire pour intercepeter le deuxieme evenement (onmouseover) lorsque le programme se trouve dans la fonction apelé par le 1er evenement a savoir onmousedown quelqu'un aurait t'il un exemple pour gérer les selections mutliple dans un tableau.


J'edite mon message pour rajouter ceci: au depart j'ai un tableau html classique et je souhaite pour debuter savoir comment modifier la couleur des cellules du tableau suivant des criteres de selection suivant:
1 double clic selectionne (change la couleur de la cellule) une cellule seule et 1 clic(maintient appuyé)+ deplacement de souris sur d'autres cellules ajoute les cellules survolé a la selection, si on revient en arriere le scripte devra deselectionner les cellules... Comment lorsque on fait une selection dans un tableur.

Je pense que certain on deja fait ce genre de script, si vous avez 2 minutes, laissez moi un message.

Merci Smiley rolleyes
Modifié par zacc (11 Oct 2006 - 20:37)
document.getElementById(i).addEventListener("mouseup",sel_mousedown,false);

Lorsque on clique ça apelle la fonction sel_mousedown.

Comment faire pour eviter d'appeler une fonction, j'aimerais pouvoir tester mousedown en faisant un truc du genre if (mousedown){scripte a executer}

Je pense que ce serait plus simple pour gerer 2 actions en meme temps, exemple un mousedown + un mouseover sur une cellule d'un tableau

on ferait un truc du genre

if (mousedown ||mouseover){scripte a executer}


Enfin je sais pas si je m'y prends pas comme il faut ou si il y a un manque de ce coté la mais la realisation d'un simple calendrier legerment interactif me semble bien difficile.

Au fait y'a quelqu'un ou je parle dans le vide depuis ces 3 postes. Smiley bawling

C'est peut etre trop complexe Smiley langue
Modérateur
bonsoir,

je n'ai pas de reponse Smiley decu , sinon celle de t'assurer que tu n'est surement pas seule ici.

il y a ce site sur lequel je reviens de temps en temps pour en apprendre un peu
http://gilles.chagnon.free.fr/cours/dhtml/evenements.html#attrcompat

et http://www.siteduzero.com/tuto-3-3556-1-le-dom.html (qui m'est pour le moment plus accessible)

grossomodo , IE ne comprend le "EventListener" , mais le "attachEvent " , il faut donc servir l'un ou l'autre selon le navigateur.

++
J'ai reussis finalement a faire fonctionner le calendrier sur ie, opera, et firfox. Pas evident mais ça marche. Smiley biggrin

Je laisse l'url pour ceux qui voudrait faire le meme genre de chose. C'est encore une ebauche.

http://xxxxxxxxx/page/calendrier2.php


Si vous savez comment faire un objet hybride pour rendre les choses plus simple, et eviter de faire ce genre de code qui est relativement lourd.





if(typeof(document.addEventListener)=="undefined")
{
document.getElementById("vert").attachEvent("onclick",sel_vert);
document.getElementById("rouge").attachEvent("onclick",sel_rouge);
}
else
{
document.getElementById("vert").addEventListener("click",sel_vert,false);
document.getElementById("rouge").addEventListener("click",sel_rouge,false);
}


J'aimerais pouvoir faire cela:

document.getElementById("vert").objet_hybride("onclick",sel_vert);
document.getElementById("rouge").objet_hybride("onclick",sel_rouge);


je sais pas si on appelle ça une fonction ou un objet mais vous voyez le truc,non?

la fonction permettrais de remplacer le code plus haut, tout en pouvant faire un document.getElementById("rouge").objet_hybride("onclick",sel_rouge);

ça permettrais d'avoir un code facile a comprendre et compatible avec differents naviguateurs. Smiley biggrin
Modifié par zacc (26 Nov 2006 - 23:11)
Je viens de regarder la fin de votre tuto, je comprends pas tout



function addEvent(oElem, sEvType, fn, bCapture)
{
   return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, bCapture):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         oElem['on' + sEvType] = fn;
}


A quoi sert le ?.


vous reutilisez ensuite la fonction mais differament:


var oO =
{
   // Méthode de connection
   _Connect:
      function(oElem, sEvType, fn, bCapture)
      {
         return oElem.addEventListener?
            oElem.addEventListener(sEvType, fn, bCapture):
            oElem.attachEvent?
               oElem.attachEvent('on' + sEvType, fn):
               oElem['on' + sEvType] = fn;
      },


A quoi sert le _ ?

Est t'il possible d'utiliser la methode comme ceci?



document.getElementById[id_element].oO._Connect(window, 'mouseover', function()


A quoi sert oElem ? Est ce que vous avez ajoute cet argument pour indiquer sur quel element du document l'evenement dois agir?

Est ce que ça veut dire qu'on peut pas faire ce que j'ai indiqué plus haut?

Je suis un peu largué
Smiley sweatdrop
Modérateur
a écrit :
A quoi sert le ?

Le ? sert à poser une condition. Dans le cas où celle-ci est vrai, la première déclaration est prise en compte, sinon c'est la deuxième. On sépare les déclarations par :.

C'est un raccourci pour écrire if(condition) { 1ère déclaration } else { 2nde déclaration } lorsque chaque déclaration ne fait qu'une ligne de code.

a écrit :
vous reutilisez ensuite la fonction mais differament
Euh, tu peux me tutoyer... C'est plus de coutume sur le forum. Smiley cligne
En fait, j'intègre la fonction en tant que méthode de l'objet oO.
Ce n'est que la définition, tout comme tu le ferais pour une fonction. Tu l'éxécutes simplement en lançant la méthode oO._Connect(...) au lieu de lancer la fonction Connect().

a écrit :
A quoi sert le _ ?
Le _ sert à différencier les méthodes des propriétés de l'objet. C'est une convention d'écriture (non obligatoire) qui est expliqué dans le tuto.

a écrit :
Est t'il possible d'utiliser la methode comme ceci?



document.getElementById[id_element].oO._Connect(window, 'mouseover', function()


A quoi sert oElem ? Est ce que vous avez ajoute cet argument pour indiquer sur quel element du document l'evenement dois agir?

Est ce que ça veut dire qu'on peut pas faire ce que j'ai indiqué plus haut?


oElem correspond à document.getElementById('rouge'), par exemple. Autrement dit, tu dois écrire :


var oElemRouge = document.getElementById('rouge');
oO._Connect(oElemRouge, 'click', sel_rouge, false);

var oElemVert = document.getElementById('vert');
oO._Connect(oElemVert, 'click', sel_vert, false);


a écrit :
Je suis un peu largué
Smiley sweatdrop
Peut-être devrais-tu lire l'ensemble du tuto plutôt que de ne prendre que les codes... Smiley smile
J'ai encore un probleme avec mon calendrier, actuellement si je fait un clic maintenu et que je sors du calendrier avec la souris l'evenement mouseover reste actif alors qu'il devrait ce desactiver lorsque on sort du tableau.

J'ai essayé de mettre un mouseout sur le tableau lui meme mais ça ne fonctionne pas, car ce qu'il y a entre les cellules du tableau fait justement partis du tableau et donc l'evenement mouseout declenche lorsque la souris passe d'une cellule a une autre.

J'ai essayé de mettre le calendrier dans un autre tableau mais j'obtiens le meme resultat.

Existe t'il un moyen de detecter la sortie du tableau?

ce qui cloche est ici: http://loc-europe.com/page/calendrier3.php
Modifié par zacc (15 Oct 2006 - 20:02)
Je viens de voir un truc qui n'as rien a voir avec le sujet, ce forum indique en clair nos email, c'est pour cette raison que je me fais spammer! Smiley fache
Modérateur
Hello zacc,

Tu n'es pas obligé d'indiquer ton email. Smiley smile Pour qu'il n'apparaisse pas,tu n'as qu'à le supprimer en éditant ton profil. Smiley cligne

Sinon, pour ton problème de détection de sortie du tableau, c'est un soucis que je partage...
... sur <msg type="subliminal" target="Raphaël"><bigstrong>un menu déroulant</bigstrong></msg> donc si quelqu'un a la réponse, je suis tout ouïe. Smiley ravi

Ce que je sais, c'est :

* que l'ordre séquenciel des événements est le suivant :

- mouseout
- mousemove
- mouseover

* que lorsque tu passes d'une cellule du tableau à une autre (comme moi sur les li du menu), tu repasses entre chaque sur l'élément table ce qui déclenche un mouseout sur table juste avant le mouseover sur la cellule.

* que le moyen d'obtenir la référence aux objets quittés et vers lesquels on se déplace s'effectue avec la propriété relatedTarget équivalente à toElement et fromElement sur IE.
-> Sur un mouseout, relatedTarget et toElement indiquent l'objet vers lequel on se dirige.
-> Sur un mouseover, relatedTarget et fromElement indiquent l'objet qu'on vient de quitter.

* qu'après un mois et demi de recherche, je n'ai pas résolu ce problème... Smiley confus

... donc, please, Smiley help
Dans mon cas j'ai mis l'evenement mouseout sur un table comme ceci

<table id="table">
<tr><td><td></tr>
</table>

Logiquement ça devrais declencher uniquement si on sort du tableau, a part si l'evenement mouseout se propage vers le bas jusqu'a <tr> et <td>, peut etre qu'en reglant le bubbles pour que les evenements migres vers le haut ça provoquerait plus le declenchement lorsqu'on passe d'une cellule a une autre.

Quant je relis mon message ça parait bizarre mais c'est possible, non? Je vais faire un test.


j'ai testé differentes combinaison, ça ne donne rien de bon.
Modifié par zacc (16 Oct 2006 - 13:57)
Modérateur
bonjour,

ça n'a peut-etre aucun rapport, ...
mais en passant d'une cellule a l'autre , on quitte un element enfant de table pour aller vers un autre ... la solution est peut-etre d'ignorer cet "evenement" sur les cellules ... ??

bonsoir
zacc a écrit :
J'ai encore un probleme avec mon calendrier, actuellement si je fait un clic maintenu et que je sors du calendrier avec la souris l'evenement mouseover reste actif alors qu'il devrait ce desactiver lorsque on sort du tableau.

J'ai essayé de mettre un mouseout sur le tableau lui meme mais ça ne fonctionne pas, car ce qu'il y a entre les cellules du tableau fait justement partis du tableau et donc l'evenement mouseout declenche lorsque la souris passe d'une cellule a une autre.

J'ai essayé de mettre le calendrier dans un autre tableau mais j'obtiens le meme resultat.

Existe t'il un moyen de detecter la sortie du tableau?

ce qui cloche est ici: http://xxxxxxxxxxx/page/calendrier3.php
Sujet clos
Aller à