Retourner à la page d'accueil de TJS

Script mouse : Etude des événements liés à la souris

Affiche les informations et propriétés des événements de souris
Partie II : L'interactivité / Chapitre 11 : La programmation événementielle / Page 159

Exécution du script

Emulation de la console

Code source

<html><head>    <title>Evénements de souris</title>    <style type="text/css">        div#bloc {            background-color:#aaa;            width:98%;            height:250px;            margin:5px;        }         div#info {            padding:5px;            font-size:15px;            border:2px solid #999;            min-height:80px;            font-family: courier new;        }    </style></head><body>    <h1>Détection des événements de la souris</h1>    <h3>Déplacez le curseur souris dans le bloc gris</h3>    <div id="bloc"></div>    <div id="info"></div>    </body>    <script type="text/javascript">        var bloc=document.getElementById("bloc");        var info=document.getElementById("info");bloc.addEventListener("mouseenter", function(evt) {  info.style.borderColor="#0a0";});bloc.addEventListener("mouseleave", function(evt) {  info.style.borderColor="#999";});bloc.addEventListener("mousemove", blocMove);function blocMove(evt) {  var i="Position dans l'écran : (screenX, screenY) = ";  i+="("+evt.screenX+", "+evt.screenY+")<br />";  i+="Position dans la page : (clientX, clientY) = ";  i+="("+evt.clientX+", "+evt.clientY+")<br />";  i+="Position dans le bloc : (offsetX, offsetY) = ";  i+="("+evt.offsetX+", "+evt.offsetY+")<br />";  i+="Déplacement depuis mousemove : (movementX, movementY) = ";  i+="("+evt.movementX+", "+evt.movementY+")";  info.innerHTML=i;}        bloc.addEventListener("click", blocClick);        function blocClick(evt) {            console.log(evt);            console.log("Un clic a été détecté bouton = "+evt.button);        }        bloc.addEventListener("dblclick", blocDblClick);        function blocDblClick(evt) {            console.log("Un double-clic a été détecté bouton = "+evt.button);        }        bloc.addEventListener("auxclick", blocAuxClick);        function blocAuxClick(evt) {            console.log("Un clic auxiliaire a été détecté bouton = "+evt.button);        }        window.addEventListener("mousewheel", mWheel);        function mWheel(evt) {            console.log(evt);        }            //console.log(Object.getPrototypeOf(evt).constructor.name);    </script></html>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...
Le 08/12/2019 00:45:31 sur php7 en 50.15 ms