dispatcher des événements clavier

Le
unbewusst.sein
j'utilise les événements en provenance du clavier (key events) à deux
fins :

- au niveau de la fenêtre, par exemple ^+b me donne la couleur de fond
de l'élément survolé par la souris ;

- sur une page, j'ai des sliders et je souhaite qu'une frappe de la
flèche droite déplace le slider vers la droite.

bon, ces deux handlers marchent indépendamment l'un de l'autre, pas de
pb.


mais comment faire en sorte que les deux puissent fonctionner
simultanément ?

dans le premier cas, je fais :

document.onmousemove=function(e){
var position=[e.pageX,e.pageY];
document.onkeydown=function(e){};
};

par le 'onmousemove' je m'assure de pouvoir retrouver l'élément sous la
souris et donc sa couleur de fond, ou de texte.

dans le second :

_bkg_img_node.onmouseover=function(){
_mouseover=true;
this.firstChild.src='slider/background_hover.png';
document.onkeydown=keyDownHandler;
return false;
};
_bkg_img_node.onmouseout=function(){
_mouseoverúlse;
this.firstChild.src='slider/background.png';
document.onkeydown=null;
return false;
};

function keyDownHandler(e){
var tick=1;
if(window.event){e=window.event;}
if(e.ctrlKey){tick;}
switch(e.keyCode){
case 37:_that.decreaseValue(tick);break;
case 38:_that.setToMax();break;
case 39:_that.increaseValue(tick);break;
case 40:_that.setToMin();break;
}
return false;
}

là par le 'mouseover' je n'actionne le handler que lorsque je suis au
dessus d'un slider donné (j'en ai 6 en tout).

--
Une Bévue
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
unbewusst.sein
Le #4605991
Une Bévue
mais comment faire en sorte que les deux puissent fonctionner
simultanément ?


une première solution "toute bêbête" est de prendre onkeydown dans un
cas, et onkeyup dans l'autre, ça roule...

mais bon si quelqu'un a une solution plus générale...
--
Une Bévue

Mickaël Wolff
Le #4687101
mais comment faire en sorte que les deux puissent fonctionner
simultanément ?


Dans le lien que j'ai posté à ton précédent sujet, il y a la
description de l'API DOM Events. Il y est expliqué comment gérer
plusieurs gestionnaires d'événements de manière normaliser sur un même
élément

Attention, MSIE jusqu'à au moins la version 6 n'est pas compatible, et
utilises une autre API pour attacher les événements.

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org

unbewusst.sein
Le #4687071
Mickaël Wolff

Dans le lien que j'ai posté à ton précédent sujet, il y a la
description de l'API DOM Events. Il y est expliqué comment gérer
plusieurs gestionnaires d'événements de manière normaliser sur un même
élément
<http://www.w3.org/TR/DOM-Level-3-Events/
events.html#Events-EventTarget-addEventListener>


ah ok, il faut le faire de cette manière (addEventListenr) pas bêtemnt
par :

ma_div.onkeydown=keyDownHandler; ...



Attention, MSIE jusqu'à au moins la version 6 n'est pas compatible, et
utilises une autre API pour attacher les événements.


oui, MSIE je sais mais je n'ai pas de quoi tester sur MSIE...


merci pour ces infos !
--
Une Bévue

unbewusst.sein
Le #4687061
Mickaël Wolff

<http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-EventTarget-

addEventListener>.

j'ai trouvé un tuto "basique" là :
--
Une Bévue

unbewusst.sein
Le #4687031
Mickaël Wolff

<http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-EventTarget-

addEventListener>.

OK, merci, ce que j'avais avant (et qui "marchotait" càd keyup d'un côté
et keydown de l'autre) :

_bkg_img_node.onmouseover=function(){
_mouseover=true;
this.firstChild.src='slider/background_hover.png';
document.onkeyup=keyupHandler;
//----^^^^^^^^
return false;
};

comme il peut y a avoir conflit avec les events gérés par document, je
préfère donc utiliser "addEventListener", donc je passe à :

_bkg_img_node.addEventListener( "mouseover", mouseoverHandler, false );
_bkg_img_node.addEventListener( "mouseout", mouseoutHandler, false );
_bkg_img_node.addEventListener( "keyup", keyupHandler, false );

avec, par exemple pour mouseoverHandler :

function mouseoverHandler(e){
_mouseover=true;
var node=e.target;
if(node.nodeName==='img'){node.src='slider/background_hover.png';}
}

ça marche impec comment avant...
mais déjà, l'événement est reçu par l'image dans la <div />, ce qui
m'arrange d'ailleurs, le but étant de la changer...

alors que "_bkg_img_node" est obtenu par :
_bkg_img_node=document.createElement('div');
donc pourquoi ???

ensuite si j'ai pour "keyupHandler" :
function keyupHandler(e){alert('keyupHandler');}

pas d'alerte ;-)


j'intuite qu'il y a un pb particulier car l'event provient du clavier
pas de l'UI...
--
Une Bévue

unbewusst.sein
Le #4687021
Une Bévue

ensuite si j'ai pour "keyupHandler" :
function keyupHandler(e){alert('keyupHandler');}

pas d'alerte ;-)


je continue à me répondre si jamais ça intéressait qq'1 d'autre.

donc j'ai remis document.addaddEventListener( "keyup", keyupHandler,
false );

et là le e.taget.nodeName est à "html"...

bon, MAIS mon problème est résolu quand même, dans mon constructeur de
slider j'ai donc un :
function mouseoverHandler(e){
_mouseover=true;
var node=e.target;
if(node.nodeName==='img'){node.src='slider/background_hover.png';}
document.addEventListener("keyup",keyupHandler,false);
//--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
}
^
c'est dans un fichier js à part.

dans le document (x)html, j'ai par ailleurs :
document.addEventListener("keyup",keydownColorHandler,false);

donc tout les deux sur 'keyup' et là il n'y a pas de conflit...
--
Une Bévue

Publicité
Poster une réponse
Anonyme