kurse:ef05a-2021:js:projekte:mouseevents

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
kurse:ef05a-2021:js:projekte:mouseevents [2022/03/23 06:22] – Ivo Blöchligerkurse:ef05a-2021:js:projekte:mouseevents [2022/03/23 06:24] (current) – Ivo Blöchliger
Line 1: Line 1:
 +====== 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>