Beispiel:JS-Anw-Test Maus Touch Pointerevents.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>Maus - Touch - Pointer</title>
<style type="text/css">
#mtp_target { width:200px; height:200px; border:1px dotted black; display: inline-block; }
#innerDiv { width: 50px; height: 50px; border:1px dotted black; display: inline-block; margin: 50px; }
#checkboxdiv { display: inline-block; vertical-align: top; }
#checkboxdiv label { display: block; }
#checkboxdiv output { display: block; }
#outEventInfo { display: block; margin-top: .5em; }
</style>
</head>
<body>
<h1>Maus - Touch - Pointer</h1>
<div id="mtp_target"><div id="innerDiv"></div></div>
<div id="checkboxdiv">
<output id="outModell"></output>
<label><input id="me" type="checkbox"> Mouse-Events</label>
<label><input id="te" type="checkbox"> Touch-Events</label>
<label><input id="pe" type="checkbox" checked> Pointer-Events</label>
<label><input id="pd" type="checkbox" checked> preventDefault()</label>
<label><input id="ta" type="checkbox" checked> touch-action=none</label>
<output id="outMoveMouse"></output>
<output id="outMoveTouch"></output>
<output id="outMovePointer"></output>
</div>
<output id="outEventInfo"></output>
<script>
window.addEventListener("DOMContentLoaded", function() {
"use strict";
// Debughilfe
const outputModell = document.querySelector("#outModell");
const outputMoveMouse = document.querySelector("#outMoveMouse");
const outputMoveTouch = document.querySelector("#outMoveTouch");
const outputMovePointer = document.querySelector("#outMovePointer");
const outputEventInfo = document.querySelector("#outEventInfo");
let count = 0;
function log() {
outputEventInfo.innerHTML = count + ": " + [].join.call(arguments,", ") + "<br>" + outputEventInfo.innerHTML;
console.log(count + ": ", [].join.call(arguments,", "));
count ++;
}
function log_move() {
switch(arguments[0]) {
case "mouse":
outputMoveMouse.innerHTML = [].join.call(arguments,", ");
break;
case "touch":
outputMoveTouch.innerHTML = [].join.call(arguments,", ");
break;
case "pointer":
outputMovePointer.innerHTML = [].join.call(arguments,", ");
break;
default:
outputMoveMouse.innerHTML = "";
outputMoveTouch.innerHTML = "";
outputMovePointer.innerHTML = "";
}
}
// Welches Eventmodell wird unterstützt?
const can_pointer_event = ("PointerEvent" in window);
const can_touch_event = ("TouchEvent" in window);
if(can_pointer_event) {
log("Pointer-Events werden unterstützt");
outputModell.innerHTML += "Pointer-Events werden unterstützt" + "<br>";
}
if(can_touch_event) {
log("Touch-Events werden unterstützt");
outputModell.innerHTML += "Touch-Events werden unterstützt" + "<br>";
}
// Referenz auf das sensitive Element ermitteln
const mtp = document.querySelector("#mtp_target");
// Position der Touchfläche relativ zum Viewport
let offset = mtp.getBoundingClientRect();
// Statusvariable
let active = false;
// Cache für Poinerevents
let pointereventcache = [];
// Eventhandler für einzelnen bewegten Pointer (Maus)
function move_mouse(event) {
if(active) {
if(document.querySelector("#pd").checked) event.preventDefault();
let x = event.clientX - offset.left;
let y = event.clientY - offset.top;
log_move("mouse","move_mouse",event.target.id,event.type,Math.round(x),Math.round(y));
}
} // move_mouse
// Eventhandler für mehrere bewegte Pointer (touch)
function move_touch(event) {
if(active) {
if(document.querySelector("#pd").checked) event.preventDefault();
if(event.targetTouches.length>1) {
let xs = event.targetTouches[0].clientX - offset.left;
let ys = event.targetTouches[0].clientY - offset.top;
let xe = event.targetTouches[1].clientX - offset.left;
let ye = event.targetTouches[1].clientY - offset.top;
log_move("touch","move_touch_double",event.target.id,event.type,Math.round(xs),Math.round(ys),Math.round(xe),Math.round(ye));
}
else {
let x = event.targetTouches[0].clientX - offset.left;
let y = event.targetTouches[0].clientY - offset.top;
log_move("touch","move_touch_single",event.target.id,event.type,Math.round(x),Math.round(y));
}
}
} // move_touch
// Eventhandler für mehrere bewegte Pointer (pointer)
function move_pointer(event) {
if(active) {
if(document.querySelector("#pd").checked) event.preventDefault();
for (let i = 0; i < pointereventcache.length; i++) {
if (event.pointerId == pointereventcache[i].pointerId) {
pointereventcache[i] = event;
break;
}
}
if(pointereventcache.length>1) {
let xs = pointereventcache[0].clientX - offset.left;
let ys = pointereventcache[0].clientY - offset.top;
let xe = pointereventcache[1].clientX - offset.left;
let ye = pointereventcache[1].clientY - offset.top;
log_move("pointer","move_pointer_double",event.target.id,event.type,Math.round(xs),Math.round(ys),Math.round(xe),Math.round(ye));
}
else {
let x = pointereventcache[0].clientX - offset.left;
let y = pointereventcache[0].clientY - offset.top;
log_move("pointer","move_pointer_single",event.target.id,event.type,Math.round(x),Math.round(y));
}
}
} // move_pointer
// Eventhandler für mouseup, touchend, pointerup
function up(event) {
if(document.querySelector("#pd").checked) event.preventDefault();
log("up",event.target.id,event.type,event.pointerType);
pointereventcache = [];
active = false;
} // up
// Eventhandler für mousedown, touchstart, pointerdown
function down(event) {
if(document.querySelector("#pd").checked) event.preventDefault();
log("down",event.target.id,event.type,event.pointerType)
log_move();
if(event.type=="pointerdown") pointereventcache.push(event);
offset = mtp.getBoundingClientRect();
active = true;
} // down
// Eventhandler für Enter/Over
function enter(event) {
log("enter/over",event.target.id,event.type);
}
// Eventhandler für Leave/Out
function leave(event) {
log("leave/out",event.target.id,event.type);
}
// Eventhandler für click
function click(event) {
log("click",event.target.id,event.type,`es wurde ${event.detail} mal geklickt.`);
}
// Die Eventhandler setzen
// Geräteunabhängige Events
mtp.addEventListener("click",click,false);
// Mouse-Events
function mouse_events(set) {
if(set) {
mtp.addEventListener("mousedown",down,false);
mtp.addEventListener("mousemove",move_mouse,false);
mtp.addEventListener("mouseup",up,false);
mtp.addEventListener("mouseenter",enter,false);
mtp.addEventListener("mouseleave",leave,false);
mtp.addEventListener("mouseover",enter,false);
mtp.addEventListener("mouseout",leave,false);
}
else {
mtp.removeEventListener("mousedown",down);
mtp.removeEventListener("mousemove",move_mouse);
mtp.removeEventListener("mouseup",up);
mtp.removeEventListener("mouseenter",enter);
mtp.removeEventListener("mouseleave",leave);
mtp.removeEventListener("mouseover",enter);
mtp.removeEventListener("mouseout",leave);
}
}
// Touch-Events
function touch_events(set) {
if(set) {
mtp.addEventListener("touchstart",down,false);
mtp.addEventListener("touchmove",move_touch,false);
mtp.addEventListener("touchend",up,false);
}
else {
mtp.removeEventListener("touchstart",down);
mtp.removeEventListener("touchmove",move_touch);
mtp.removeEventListener("touchend",up);
}
}
// Pointer-Events
function pointer_events(set) {
if(set) {
if(document.querySelector("#ta").checked) mtp.style.touchAction = "none";
mtp.addEventListener("pointerdown",down,false);
mtp.addEventListener("pointermove",move_pointer,false);
mtp.addEventListener("pointerup",up,false);
mtp.addEventListener("pointerenter",enter,false);
mtp.addEventListener("pointerleave",leave,false);
mtp.addEventListener("pointerover",enter,false);
mtp.addEventListener("pointerout",leave,false);
}
else {
mtp.style.touchAction = "";
mtp.removeEventListener("pointerdown",down);
mtp.removeEventListener("pointermove",move_pointer);
mtp.removeEventListener("pointerup",up);
mtp.removeEventListener("pointerenter",enter);
mtp.removeEventListener("pointerleave",leave);
mtp.removeEventListener("pointerover",enter);
mtp.removeEventListener("pointerout",leave);
}
}
// Eventmodelle über Checkboxen schalten
mouse_events(document.querySelector("#me").checked);
touch_events(document.querySelector("#te").checked);
pointer_events(document.querySelector("#pe").checked);
document.querySelector("#me").addEventListener("change",function(event) {
if(this.checked) {
log("Mouse-Events on")
mouse_events(true);
}
else {
log("Mouse-Events off")
mouse_events(false);
}
},false);
document.querySelector("#te").addEventListener("change",function(event) {
if(this.checked) {
log("Touch-Events on")
touch_events(true);
}
else {
log("Touch-Events off")
touch_events(false);
}
},false);
document.querySelector("#pe").addEventListener("change",function(event) {
if(this.checked) {
log("Pointer-Events on")
pointer_events(true);
}
else {
log("Pointer-Events off")
pointer_events(false);
}
},false);
document.querySelector("#ta").addEventListener("change",function(event) {
if(this.checked) {
log('touch-action="none"');
mtp.style.touchAction = "none";
}
else {
log('touch-action=""');
mtp.style.touchAction = "";
}
},false);
document.querySelector("#pd").addEventListener("change",function(event) {
if(this.checked) {
log('mit preventDefault');
mtp.style.touchAction = "none";
}
else {
log('ohne preventDefault');
mtp.style.touchAction = "";
}
},false);
}, false);
</script>
</body>
</html>
