codestory

Die Anleitung zu Javascript MouseEvent

View more Tutorials:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt. Facebook

1- MouseEvent

MouseEvent ist eine Interface für die Vertretung der Events, die passieren wenn der Benutzer mit dem Zeiger Gerät (pointing device), wie dem Maus interagiert. Die üblichen Events sind click, dbclick, mousedown, mouseup,...
MouseEvent ist eine Sub-Interface von UIEvent.
Die Eventstyp von MouseEvent:
EventBezeichnung
clickDas Event passiert wenn der Benutzer auf ein Element klickt (click).
contextmenuDas Event passiert wenn der Benutzer auf das Element recht-klickt um ein context-menu zu öffnen.
dblclickDas Event passiert wenn der Benutzer auf ein Element doppelt-klickt.

mousedownDas Event passiert wenn der Benutzer die Maus-Button auf ein Element drückt.
mouseupDas Event passiert wenn der Benutzer die gedrücktene Maus-Button auf ein Element befreit

mouseenterDas Event passiert wenn der Zeiger (pointer) zu einem Element eintritt.
mouseleaveDas Event passiert wenn der Zeiger (pointer) aus einem Element austritt.

mousemoveDas Event passiert wenn der Zeiger über die Fläche des Element oder über seine Sub-Element bewegt.

mouseoutDas Event passiert wenn der Benutzer den Zeiger aus einem Element oder aus einem der Sub-Element von ihm austritt.
mouseoverDas Event passiert wenn der Benutzer den Zeiger zu einem Element oder zu einem der Sub-Element von ihm bewegt.
mousedown, mouseup, click
Starten wir mit dem üblichsten Event zwischen der Maus Events. Das ist click (den Maus klicken). Es wird von der Aktion vom Niederdrücken (press down) und Befreien (release) gebildet. Das Event click wird wie folgend bezeichnet:
dbclick
Wenn Sie zwei Mal schnell klicken, wird es das Event dbclick ​​​​​​​bilden.
mouseover vs mouseenter
Das Event mouseenter passiert wenn der Zeiger auf einem Element bewegt. Das Event mouseover passiert wenn der Zeiger zu einem Element oder einem seiner Sub-Element eintritt.
mouseleave vs mouseout
Das Event mouseleave passiert wenn der Zeiger  einem Element weggehen. Das Event mouseout passiert wenn der Zeiger aus einem Element oder einem seiner Sub-Element austritt.
Das folgende Beispiel hilft Ihnen bei dem Vergleich von mouseenter vs mouseover, mouseleave vs mouseout:
enter-vs-over-leave-vs-out.html

<!DOCTYPE html>
<html>

<head>
    <title>Javascript Mouse Events</title>

    <script src="enter-vs-over-leave-vs-out.js"></script>
    <style>
        #target-div {
            width: 320px;
            height: 150px;
            background: blue;
        }
        #target-div > div  {
            width: 50px;
            height: 80px;
            margin: 40px 0 0 40px;
            padding: 5px 0 0 5px;
            float: left;
            background: yellow;
        }
    </style>
</head>

<body>

    <h3>mouseenter vs mouseover</h3>
    <h3>mouseleave vs mouseout</h3>

    <div id="target-div"
               onmouseenter="mouseenterHandler(event)"
               onmouseover="mouseoverHandler(event)"
               onmouseleave="mouseleaveHandler(event)"
               onmouseout="mouseoutHandler(event)"
               >
            <div>Child</div>
            <div>Child</div>
            <div>Child</div>
    </div>
    <h3>Statistics:</h3>
    <div style="color:red;" id="statistics-div">

    </div>

</body>
</html>
 
enter-vs-over-leave-vs-out.js


var enterCount = 0;
var overCount = 0;

var leaveCount = 0;
var outCount = 0;


function mouseenterHandler(evt) {
    enterCount += 1;
    showStatistics();
}

function mouseoverHandler(evt) {
    overCount += 1;

    showStatistics();
}


function mouseleaveHandler(evt) {
    leaveCount += 1;
    
    showStatistics();
}

function mouseoutHandler(evt) {
    outCount += 1;

    showStatistics();
}


function showStatistics() {
    var html =
        "enterCount:" + enterCount + "<br/>" //
        +
        "overCount:" + overCount  + "<hr/>" //
        +
        "leaveCount:" + leaveCount + "<br/>" //
        +
        "outCount:" + outCount ;
    document.getElementById("statistics-div").innerHTML = html;
}

 
mousemove
mousemove-example.html

<!DOCTYPE html>
<html>

<head>
    <title>Javascript Mouse Events</title>

    <script src="mousemove-example.js"></script>
    <style>
        #target-div {
            width: 320px;
            height: 150px;
            background: blue;
            margin-bottom: 50px;
        }
        #target-div > div  {
            width: 50px;
            height: 150px;
            margin: 40px 0 0 40px;
            padding: 5px 0 0 5px;
            float: left;
            background: yellow;
        }
    </style>
</head>

<body>

    <h3>mousemove example</h3>

    <div id="target-div" onmousemove="mousemoveHandler(event)">

            <div>Child</div>
            <div>Child</div>
            <div>Child</div>

    </div>

    <h3>Statistics:</h3>
    <div style="color:red;" id="statistics-div">

    </div>

</body>
</html>

 
mousemove-example.js


var moveCount = 0;


function mousemoveHandler(evt) {
    moveCount += 1;
    showStatistics();
}


function showStatistics() {
    var html = "moveCount:" + moveCount;
    document.getElementById("statistics-div").innerHTML = html;
}

 

2- Properties & Methods

MouseEvent ist die Sub-Interface von UIEvent, deshalb erbt es die Properties und die Methode aus dieser Interface.
key
PropertyBezeichnung
altKeytrue zurückgeben wenn der Schlüssel "ALT" beim passierenden Maus-Event gedrückt wird, umgekehrt gibt es false zurück.
ctrlKeytrue zurückgeben wenn der Schlüssel "CTRL" beim passierenden Maus-Event gedrückt wird, umgekehrt gibt es false zurück
shiftKeytrue zurückgeben wenn der Schlüssel "SHIFT" beim passierenden Maus-Event gedrückt wird, umgekehrt gibt es false zurück
metaKeytrue zurückgeben wenn der Schlüssel "META" beim passierenden Maus-Event gedrückt wird, umgekehrt gibt es false zurück
Das Beispiel mit dem Property ctrlKey:
prop-ctrlKey-example.html

<!DOCTYPE html>
<html>

<head>
    <title>Javascript Mouse Events</title>

    <style>
        #target-div {
            width: 320px;
            height: 150px;
            background: blue;
            margin-bottom: 10px;
        }
    </style>
    
    <script>
      function clickHandler(evt) {
        var html = "evt.ctrlKey=" + evt.ctrlKey;

        document.getElementById("log-div").innerHTML = html;
      }
    </script>
</head>

<body>

    <h3>Press Ctrl key and Click</h3>

    <div id="target-div" onclick="clickHandler(event)" >

    </div>

    <div style="color:red;" id="log-div">

    </div>

</body>
</html>

 
Position:
PropertyDescription
clientXDie horizontale Koordinate des Maus Zeiger zurückgeben, relativ zum Fenster wenn das Maus Event ausgelöst wird.
clientYDie vertikale Koordinate des Maus Zeiger zurückgeben, relativ zum Fenster wenn das Maus Event ausgelöst wird.

offsetXDie horizontale Koordinate des Maus Zeiger zurückgeben, relativ zu dem Element, das das Maus Event emittiert.
offsetYDie vertikale Koordinate des Maus Zeiger zurückgeben, relativ zu dem Element, das das Maus Event emittiert.

pageXDie horizontale Koordinate des Maus Zeiger zurückgeben, relativ zu document (page).
pageYDie vertikale Koordinate des Maus Zeiger zurückgeben, relativ zu document (page).

screenXDie horizontale Koordinate des Maus Zeiger zurückgeben, relativ zum Bildschirm (Computer, Gerät).
screenYDie vertikale Koordinate des Maus Zeiger zurückgeben, relativ zum Bildschirm (Computer, oder Gerät).

movementXDie horizontale Koordinate des Maus Zeiger zurückgeben,relativ zu der Stelle des letzten Event mousemove .
movementYDie vertikale Koordinate des Maus Zeiger zurückgeben,relativ zu der Stelle des letzten Event mousemove 
prop-positions-example.html

<!DOCTYPE html>
<html>

<head>
    <title>Javascript Mouse Events</title>

    <script src="prop-positions-example.js"></script>
    <style>
        #target-div {
            width: 300px;
            height: 210px;
            background: #ccc;
            margin: 0px 0px 10px 20px;
            padding: 5px;
        }
    </style>

</head>

<body style="height:450px; width:1000px;">

    <h3>Positions</h3>

    <div id="target-div" onmousemove="mousemoveHandler(event)" >

    </div>

</body>
</html>

 
prop-positions-example.js


function mousemoveHandler(evt) {

     var html =  "offsetX = " + evt.offsetX +"<br/>"
               + "offsetY = " + evt.offsetY +"<br/>"
               + "clientX = " + evt.clientX +"<br/>"
               + "clientY = " + evt.clientY +"<br/>"
               + "pageX = " + evt.pageX +"<br/>"
               + "pageY = " + evt.pageY +"<br/>"
               + "screenX = " + evt.screenX +"<br/>"
               + "screenY = " + evt.screenY +"<br/>"
               + "movementX = " + evt.movementX +"<br/>"
               + "movementY = " + evt.movementY;

      document.getElementById("target-div").innerHTML = html;
}

 
button
PropertyBezeichnung
buttonEine Zahl zurückgeben, die bezeichnet, welcher Mause Button gedrückt wird wenn das Maus Event ausgelöst wird.
buttonsEine Zahl zurückgeben, die bezeichnet, welche Maus Button gedrückt werden wenn das Maus Event ausgelöst wird.


which(Kein Standard-Attribut, nicht benutzt werden sollen).
event.button:
  • 0: Der Hauptbutton, oft der rechte Maus Button.
  • 1: der zusätzliche Button (Auxiliary button), oft der Rad Button oder der Mittelbutton (wenn ja).
  • 2: der zweite Button, oft der rechte Maus Button.
  • 3: der vierte Button, konkret der Button Browser Back.
  • 4: der fünfte Button, konkret der Button Browser Forward.
event.buttons:
  • 0 : keine Button oder uninitialisiert.
  • 1 : der Hauptbutton, oft der linke Maus Button.
  • 2 : der zweite Button, oft der rechte Maus Button.
  • 4 : der Hilfsbutton (Auxilary button), oft der Rad Button oder der Mittelbutton.
  • 8 : der 4th Button, oft der Button "Browser Back".
  • 16 : der 5th Button, oft der Button "Browser Forward".
event.buttons kann die andere Wert als die obengemeinten Wert zurückgeben. Z.B event.buttons gibt 3 zurück wenn Sie die beiden Rechtsbutton und Linksbutton gleichzeitig klicken.
prop-button-buttons-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>MouseEvent Example</title>

      <script>
          function mousedownHandler(evt) {
            var logDiv = document.getElementById("log-div");

            logDiv.innerHTML = "event.button= " + evt.button +"<br/>"
                             + "event.buttons= "+ evt.buttons;
          }
      </script>

   </head>
   <body>

      <h3>event.button, event.buttons</h3>

      <button onmousedown="mousedownHandler(event)">Click Me!</button>
      <br/><br/>

      <div id="log-div" style="color:red;"></div>
   </body>
</html>

 
Other properties
PropertyDescription
relatedTargetDas Element zurückgeben, das zu dem Element, das das Maus Event ausgelöst hat, relativ ist

View more Tutorials: