Mega Code Archive

 
Categories / JavaScript DHTML / Event
 

Catches and manages the mouses events

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML>   <HEAD>     <TITLE>JsLib 1.3 - Exemple - souris.js</TITLE>     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">     <META NAME="Author" CONTENT="Etienne CHEVILLARD">     <!-- souris.js -->     <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript"> /* souris.js  * Role : capture et gere les evenements souris  * Projet : JsLib  * Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)  * Version : 1.3  * Creation : 20/08/2001  * Mise a jour : 23/02/2005  * Bogues connues : - Netscape Navigator 4 ne gere pas le bouton du milieu  */ // capture les evenements sous Netscape Navigator if (document.layers) {   document.captureEvents(Event.MOUSEDOWN);   document.captureEvents(Event.MOUSEUP);   document.captureEvents(Event.MOUSEMOVE); } // --- Fonctions --- // retourne vrai si le dernier clic de souris concerne le bouton droit function boutonDroit(e) {   if (window.event)     return (window.event.button==2);   else     return (e.which==3); } // fin boutonDroit(e) // retourne vrai si le dernier clic de souris concerne le bouton gauche function boutonGauche(e) {   if (window.event)     return (window.event.button==1);   else {     if (e.type=="mousemove")       return (false);     else       return (e.which==1);   } } // fin boutonGauche(e) // retourne vrai si le dernier clic de souris concerne le bouton du milieu function boutonMilieu(e) {   if (window.event)     return ((window.event.button==3) || (window.event.button==4));   else     return (e.which==2); } // fin boutonMilieu(e) // retourne la position horizontale a l'ecran du pointeur de la souris function pointeurEcranX(e) {   if (window.event)     return (window.event.screenX);   else     return(e.screenX); } // fin pointeurEcranX(e) // retourne la position verticale a l'ecran du pointeur de la souris function pointeurEcranY(e) {   if (window.event)     return (window.event.screenY);   else     return(e.screenY); } // fin pointeurEcranY(e) // retourne la position horizontale sur la page du pointeur de la souris function pointeurX(e) {   if (window.event)     return (window.event.clientX);   else     return(e.pageX); } // fin pointeurX(e) // retourne la position verticale sur la page du pointeur de la souris function pointeurY(e) {   if (window.event)     return (window.event.clientY);   else     return(e.pageY); } // fin pointeurY(e)     </SCRIPT>   </HEAD>   <BODY>     <H1>JsLib 1.3</H1>     <HR>     <H2>Exemple - souris.js</H2>     <NOSCRIPT>       <P><I>Erreur : votre navigateur ne reconnait pas le Javascript ou est configur&eacute; pour ne       pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la       configuration dans les pr&eacute;f&eacute;rences/options de votre navigateur.</I>       <HR>     </NOSCRIPT>     <FORM ACTION="GET" NAME="f1" onSubmit="return false">       <P>D&eacute;placez la souris sur la page et cliquez o&ugrave; vous le souhaitez.       <TABLE SUMMARY="" BORDER=1 CELLSPACING=0 CELLPADDING=5><TR><TD>         <TABLE SUMMARY=""BORDER=0 CELLSPACING=0 CELLPADDING=0><TR>           <TD VALIGN="top">             Type de l'&eacute;v&eacute;nement :&nbsp;           </TD><TD>             <INPUT TYPE="radio" NAME="r1"> D&eacute;placement du pointeur (<I>mousemove</I>)<BR>             <INPUT TYPE="radio" NAME="r1"> Bouton de souris enfonc&eacute; (<I>mousedown</I>)<BR>             <INPUT TYPE="radio" NAME="r1"> Bouton de souris relach&eacute; (<I>mouseup</I>)<BR>           </TD>         </TR></TABLE>         <TABLE SUMMARY="" BORDER=0 CELLSPACING=0 CELLPADDING=0><TR>           <TD VALIGN="top">             Bouton concern&eacute; :&nbsp;           </TD><TD>             <INPUT TYPE="checkbox" NAME="c1"> Bouton gauche<BR>             <INPUT TYPE="checkbox" NAME="c2"> Bouton du milieu<BR>             <INPUT TYPE="checkbox" NAME="c3"> Bouton droit           </TD>         </TR></TABLE>         <P>Position du pointeur sur la page (coordonn&eacute;es en pixels) :&nbsp;         X= <INPUT TYPE="text" NAME="t1" SIZE=5 VALUE="">         Y= <INPUT TYPE="text" NAME="t2" SIZE=5 VALUE="">         <P>Position du pointeur &agrave; l'&eacute;cran (coordonn&eacute;es en pixels) :&nbsp;         X= <INPUT TYPE="text" NAME="t3" SIZE=5 VALUE="">         Y= <INPUT TYPE="text" NAME="t4" SIZE=5 VALUE="">       </TD></TR></TABLE>     </FORM>     <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">       document.onmousemove = pointeurDeplace;       function pointeurDeplace(e) {         document.f1.r1[0].checked = true;         majFormulaire(e);       }       document.onmousedown = boutonEnfonce;       function boutonEnfonce(e) {         document.f1.r1[1].checked = true;         majFormulaire(e);       }       document.onmouseup = boutonRelache;       function boutonRelache(e) {         document.f1.r1[2].checked = true;         majFormulaire(e);       }       function majFormulaire(e) {         document.f1.t1.value = pointeurX(e);         document.f1.t2.value = pointeurY(e);         document.f1.t3.value = pointeurEcranX(e);         document.f1.t4.value = pointeurEcranY(e);         document.f1.c1.checked = boutonGauche(e);         document.f1.c2.checked = boutonMilieu(e);         document.f1.c3.checked = boutonDroit(e);       }     </SCRIPT>   </BODY> </HTML>