beatovich: Frage zum Wiki-Artikel „Pointer Events“, Nachbesserung

problematische Seite

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?

  1. problematische Seite

    @@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 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. problematische Seite

      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/

      1. problematische Seite

        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

        1. problematische Seite

          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) };
          		}
          

          ???

          1. problematische Seite

            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

            1. problematische Seite

              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.

              1. problematische Seite

                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

                1. problematische Seite

                  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

                  --
                  sumpsi - posui - clusi
                  1. problematische Seite

                    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

                    1. problematische Seite

                      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

                      --
                      sumpsi - posui - clusi
                2. problematische Seite

                  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.

                  1. problematische Seite

                    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

                    1. problematische Seite

                      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);

                      1. problematische Seite

                        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);} 
                        );
                        
                        1. problematische Seite

                          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

  2. problematische Seite

    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

    --
    Es gibt viel zu tun: ToDo-Liste
    1. problematische Seite

      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?

      1. problematische Seite

        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

  3. problematische Seite

    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