Frage zum Wiki-Artikel „Pointer Events“, Nachbesserung

[beatovich]

hallo

Die Wikiseite gibt das Beispiel:

function tuWas() {
  alert ('Event-Handler wurden hinzugefügt!');
}

var elem  = document.getElementById("button")
elem.addEventListener ('pointerdown', tuWas);
elem.addEventListener ('touchstart', tuWas);
elem.addEventListener ('click', tuWas);

Das Verhalten ist allerdings suboptimal. Es werden im hier vorgeschlagenenen Vorgang bei Mausklick parallel mehrere Events gefeuert.

Eventuell kann man mit preventDefault den primären Event deaktivieren. Aber so was braucht Tests.

Deshalb mein Wunsch: Eine Seite im Wiki, die getestete Event-Methoden angibt, die sicher angewendet werden können.

Meine Glaskugel sagt mir, dass ich ohne preventDefault wohl mit onpointerdown allein + onkeypress (test auf 'Enter') allen Geräten eine universale einmalige Aktivierungsmethode geben kann.

Frage stimmt das?

[Gunnar Bittersmann]

@@beatovich

Meine Glaskugel sagt mir, dass ich ohne preventDefault wohl mit onpointerdown allein + onkeypress (test auf 'Enter') allen Geräten eine universale einmalige Aktivierungsmethode geben kann.

Frage stimmt das?

Hm, weiß nicht. Ich muss gestehen, von pointerdown höre ich zum ersten Mal. Ich wäre mir nicht sicher, ob das auch ältere Browser unterstützen. Und ob es nicht außer Pointern und Tastaturen noch andere Eingabegeräte gibt.

Aber ich denke, dass alle Browser bei Buttons auf das click-Event reagieren – unabhängig vom Eingabegerät.

LLAP 🖖

[beatovich]

Hm, weiß nicht. Ich muss gestehen, von pointerdown höre ich zum ersten Mal. Ich wäre mir nicht sicher, ob das auch ältere Browser unterstützen. Und ob es nicht außer Pointern und Tastaturen noch andere Eingabegeräte gibt.

Was wir also brauchen ist richtigen Event-Support Test. http://perfectionkills.com/detecting-event-support-without-browser-sniffing/

[JürgenB]

Hallo,

Was wir also brauchen ist richtigen Event-Support Test.

das geht ganz einfach:

// Ermitteln der unterstützten Methoden  
  var can_touch = ("TouchEvent" in window);
  var can_pointer = ("PointerEvent" in window);

http://perfectionkills.com/detecting-event-support-without-browser-sniffing/

das hat aber eher Museumscharakter.

Gruß
Jürgen

[beatovich]

hallo

Hallo,

Was wir also brauchen ist richtigen Event-Support Test.

das geht ganz einfach:

// Ermitteln der unterstützten Methoden  
  var can_touch = ("TouchEvent" in window);
  var can_pointer = ("PointerEvent" in window);

Welche bessere Garantie gibt dir das gegenüber:

		if('onpointerdown' in window){
			controls.onpointerdown = function(ev){ windowControlEvent(ev, win) };
		}
		else{
			controls.onmousedown = function(ev){ windowControlEvent(ev, win) };
		}

???

[JürgenB]

Hallo Beat,

// Ermitteln der unterstützten Methoden  
  var can_touch = ("TouchEvent" in window);
  var can_pointer = ("PointerEvent" in window);

Welche bessere Garantie gibt dir das gegenüber:

		if('onpointerdown' in window){
			controls.onpointerdown = function(ev){ windowControlEvent(ev, win) };
		}
		else{
			controls.onmousedown = function(ev){ windowControlEvent(ev, win) };
		}

es wurde von mir und von diversen Forumsmitgliedern erfolgreich getestet. Ich habe es „irgendwo“ auch als Empfehlung gelesen.

Und Events mit on… sind ja schließlich megaout. 😉

Gruß
Jürgen

[beatovich]

hallo

Hallo Beat,

// Ermitteln der unterstützten Methoden  
  var can_touch = ("TouchEvent" in window);
  var can_pointer = ("PointerEvent" in window);

Welche bessere Garantie gibt dir das gegenüber:

		if('onpointerdown' in window){
			controls.onpointerdown = function(ev){ windowControlEvent(ev, win) };
		}
		else{
			controls.onmousedown = function(ev){ windowControlEvent(ev, win) };
		}

es wurde von mir und von diversen Forumsmitgliedern erfolgreich getestet. Ich habe es „irgendwo“ auch als Empfehlung gelesen.

Und Events mit on… sind ja schließlich megaout. 😉

Gut du hast einen Punkt.

Nur worauf ich hinaus will: Wichtiger als die Grundsätzlichen Fähigkeiten zu prüfen ist die aktuelle Benutzung zu testen, und zu gewährleisten, dass der Browser in seinen Superfähigkeiten das gleiche nicht gleichzeitig 1-3-fach tut.

[JürgenB]

Hallo Beat,

… zu gewährleisten, dass der Browser in seinen Superfähigkeiten das gleiche nicht gleichzeitig 1-3-fach tut.

da habe ich auch lange dran geknobelt, auch weil das Gerät, das Maus-, Touch- und Pointerevents unterstützt, und über eine Maus, ein Touchpad und einen Touchscreen verfügt, mir erst recht spät unter die Finger gekommen ist.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

habt ihr euch schon mal mit modernizr und seiner hasEvent-Funktion befasst?

Ich habe es noch nicht, weiß nur dass es das gibt.

Rolf

[JürgenB]

Hallo Rolf,

habt ihr euch schon mal mit modernizr und seiner hasEvent-Funktion befasst?

nein. Weil ich erst modernizr hätte verstehen müssen und weil es hier mit ("TouchEvent" in window) und ("PointerEvent" in window) eine einfache Testmöglichkeit gab. Außerdem verwende ich nicht gerne große Bibliotheken, wenn ich nur einen Bruchteil daraus benötige. Da suche ich mir (auch in Bibliotheken) lieber das Bischen, das ich brauche.

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

Bei Modernizr klickst Du Dir genau die Funktionen zusammen, die Du brauchst. Und es ging mir ja auch eher drum, zu verstehen, was der Kamerad unter der Haube macht, um how-to Ideen zu bekommmen.

Rolf

[beatovich]

hallo

Hallo Beat,

… zu gewährleisten, dass der Browser in seinen Superfähigkeiten das gleiche nicht gleichzeitig 1-3-fach tut.

da habe ich auch lange dran geknobelt, auch weil das Gerät, das Maus-, Touch- und Pointerevents unterstützt, und über eine Maus, ein Touchpad und einen Touchscreen verfügt, mir erst recht spät unter die Finger gekommen ist.

mal angenommen (ungetestet)

var eventSupport={
   'pointerdown': ('pointerdown' in window)? true : false,
   'mousedown': ('mousedown' in window)? true : false,
   // ...
};

function pickEvent(chooseFrom){
   while(chooseFrom.length > 0){
      var type = chooseFrom.shift();
      if(eventSupport["on"+type] == true ) return type;
   }
}

// später

el.addEventListener(pickEvent(["pointerdown","mousedown"]), function(){...} );

Das geht natürlich nur, wenn die Funktion für die Events gleich arbeitet.

[JürgenB]

Hallo Beat,

mal angenommen (ungetestet)

var eventSupport={
   'pointerdown': ('pointerdown' in window)? true : false,
   'mousedown': ('mousedown' in window)? true : false,
   // ...
};

function pickEvent(chooseFrom){
   while(chooseFrom.length > 0){
      var type = chooseFrom.shift();
      if(eventSupport["on"+type] == true ) return type;

ich glaube, das "on"+ muss weg.

   }
}

// später

el.addEventListener(pickEvent(["pointerdown","mousedown"]), function(){...} );

Das geht natürlich nur, wenn die Funktion für die Events gleich arbeitet.

Das ist der entscheidende Satz. Die verschiedenen Eventgruppen erfordern doch ein unterschiedliches Bearbeiten der Event-Informationen. Und in den meisten Fällen reicht ein Behandeln des Click-Events.

Gruß
Jürgen

[beatovich]

hallo

 el.addEventListener(pickEvent(["pointerdown","mousedown"]), function(){...} );

Das geht natürlich nur, wenn die Funktion für die Events gleich arbeitet.

Das ist der entscheidende Satz. Die verschiedenen Eventgruppen erfordern doch ein unterschiedliches Bearbeiten der Event-Informationen. Und in den meisten Fällen reicht ein Behandeln des Click-Events.

 el.addEventListener(pickEvent(["pointerdown","mousedown"]), function(ev){
   if(ev.type=="pointerdown"){ thisFunc() }
   else{ thatFunc() }
 } );

sollte auch zu fixen sein. Aber dennoch haben wir hiermit nicht die aktuelle Benutzung getestet. (seufz);

[beatovich]

hallo

So diesmal eine getestete Version

var eventSupport={
   'pointerdown': ('onpointerdown' in window)? true : false,
   'mousedown': ('onmousedown' in window)? true : false,
   // ...
};
//console.log(eventSupport);
function pickEvent(chooseFrom){
   while(chooseFrom.length > 0){
      var type = chooseFrom.shift();
      if(eventSupport[type] == true ) return type;
   }
}

// später
var el = document.body;
//console.log(el);
//console.log(pickEvent(["pointerdown","mousedown"]));
el.addEventListener(pickEvent(["pointerdown","mousedown"]), 
                    function(ev){console.log(ev);} 
);

[JürgenB]

Hallo Beat,

So diesmal eine getestete Version

var eventSupport={
   'pointerdown': ('onpointerdown' in window)? true : false,
   'mousedown': ('onmousedown' in window)? true : false,
   // ...
};
//console.log(eventSupport);
function pickEvent(chooseFrom){
   while(chooseFrom.length > 0){
      var type = chooseFrom.shift();
      if(eventSupport[type] == true ) return type;
   }
}

// später
var el = document.body;
//console.log(el);
//console.log(pickEvent(["pointerdown","mousedown"]));
el.addEventListener(pickEvent(["pointerdown","mousedown"]), 
                    function(ev){console.log(ev);} 
);

jetzt fehlt nur noch der touchstart. Im Wiki-Artikel sieht es dann so aus:

// Ermitteln der unterstützten Methoden  
  var can_touch = ("TouchEvent" in window);
  var can_pointer = ("PointerEvent" in window);

// Die Eventhandler für pointer-, touch- und mouse-Events setzen
  if(can_pointer) { 
    roi.style.touchAction = "none";
    roi.addEventListener("pointerdown",start_roi,false);
    roi.addEventListener("pointermove",move_pointer,false);
    roi.addEventListener("pointerup",end_move,false);
  }
  else {
    if(can_touch) {
      roi.addEventListener("touchstart",start_roi,false);
      roi.addEventListener("touchmove",move_touch,false);
      roi.addEventListener("touchend",end_move,false);
    }
    roi.addEventListener("mousedown",start_roi,false);
    roi.addEventListener("mousemove",move_mouse,false);
    roi.addEventListener("mouseup",end_move,false);
  }

Gruß
Jürgen

[Matthias Scharwies]

Servus!

hallo

Die Wikiseite gibt das Beispiel:

Nein, das ist nur ein BeispielCode, noch kein Beispiel - ich habe die Seite im Dezember 2015 angelegt, als es eh noch keine Browserunterstützung gab. Das hat sich mit Firefox 59 grad geändert - jetzt fehlt nur noch Safari.

Deshalb mein Wunsch: Eine Seite im Wiki, die getestete Event-Methoden angibt, die sicher angewendet werden können.

Du hast dir grad ein <I> gekauft. Warum entwickelst du nicht ein Anwendungs-Beispiel und stellst es ins Wiki?

Herzliche Grüße

Matthias Scharwies

[beatovich]

hallo

Servus!

hallo

Die Wikiseite gibt das Beispiel:

Nein, das ist nur ein BeispielCode, noch kein Beispiel - ich habe die Seite im Dezember 2015 angelegt, als es eh noch keine Browserunterstützung gab. Das hat sich mit Firefox 59 grad geändert - jetzt fehlt nur noch Safari.

Ach das erklärt das plötzliche Erscheinen eines Bugs. Update hat falsches Design entlarvt!

Deshalb mein Wunsch: Eine Seite im Wiki, die getestete Event-Methoden angibt, die sicher angewendet werden können.

Du hast dir grad ein <I> gekauft. Warum entwickelst du nicht ein Anwendungs-Beispiel und stellst es ins Wiki?

Meine Gerätetests sind sehr beschränkt. Mein Mobile bekommt kein Web. Da bleiben mir Desktop Browser und ein Wacom-Tablet.

Aber um hier an mehr Information zu gelangen, müssen wir die in der Community verfügbaren geräte anzapfen.

Deshalb: Wie können wir Tests schreiben, Mitglieder hier einladen, und dann die Information zuverlässig auswerten?

Vorschlag? über Wiki, über getackerten Forumartikel?

[JürgenB]

Hallo,

Aber um hier an mehr Information zu gelangen, müssen wir die in der Community verfügbaren geräte anzapfen.

Deshalb: Wie können wir Tests schreiben, Mitglieder hier einladen, und dann die Information zuverlässig auswerten?

Vorschlag? über Wiki, über getackerten Forumartikel?

das ist alles schon passiert. Du hättest nur dem „Siehe auch“ folgen müssen.

Gruß
Jürgen

[JürgenB]

Hallo,

ich habe mich vor einiger Zeit mal an die Maus/Touch/Pointer-Events gewagt:

https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Mouse_and_More

Ich habe damals mit Hilfe von Forumsteilnehmern diverse Tests auf diversen Geräten durchgeführt bzw. durchführen lassen.

Gruß
Jürgen