kurse:ef05a-2021:js:projekte:mouseevents [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Maus-Interaktion ======
  * Dinge animieren, siehe [[.:jumpnrun|Jump'n Run]]
  * Mouse-Events: https://www.w3schools.com/jsref/obj_mouseevent.asp
    * Achtung: Es nicht garantiert, dass z.B. auf ein ''mouseenter'' ein ''mouseleave'' folgt.
  * Es gibt entsprechende Touch-Events: https://www.w3schools.com/jsref/obj_touchevent.asp
  * Die Koordinatenumrechnung ist nicht offensichtlich. Folgender Code hat bei mir funktioniert (sowohl am PC wie auf dem Smartphone):
<code javascript>
// from https://www.chestysoft.com/imagefile/javascript/get-coordinates.asp
function findPosition(oElement) {
  if(typeof( oElement.offsetParent ) != "undefined") {
    for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
      posX += oElement.offsetLeft;
      posY += oElement.offsetTop;
    }
    return [ posX, posY ];
  } else {
    return [ oElement.x, oElement.y ];
  }
}

function handleMove(evt) {
        evt.preventDefault();
        let touches = evt.changedTouches;
        let x,y; 
        let myElement = document.getElementById("hierDieIdDesElementsEinsetzen");  // oder einfach this verwenden (das Element, das den Event ausgelöst hat).

        if (touches) {
                let padcoords = findPosition(myElement);
                x = touches[0].pageX-padcoords[0];
                y = touches[0].pageY-padcoords[1];
        } else {
                let bb = myElement.getBoundingClientRect();
                x = evt.clientX - bb.x;
                y = evt.clientY - bb.y;
        }
        // x,y sind die Koordinaten relativ zum Element 
        if (evt.buttons !== 0 && evt.type!=="touchend" && evt.type!="touchcancel") { // Mausknopf gedrückt oder Touch nicht fertig
                // Tu was
        }
}

function setupTouches(el) {
	el.addEventListener("touchstart", handleMove, true);
	el.addEventListener("touchmove", handleMove, true);
	el.addEventListener("touchend", handleMove, true);
	el.addEventListener("touchcancel", handleMove, true);
	el.addEventListener("mousemove", handleMove, true);
	el.addEventListener("dragstart", handleMove, true);
	el.addEventListener("dragmove", handleMove, true);
	el.addEventListener("dragend", handleMove, true);
	el.addEventListener("click", handleMove, true);
}
</code>