Catches and manages the mouse's 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>
Catches and manages the mouse's events : Mouse Event : Event onMethod JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Event onMethod » Mouse Event »

Catches and manages the mouse's events

Leave a Comment / Note

JAVASCRIPT DHTML TUTORIALS
