Using PointerEvents on browsers that support it

src/lib/components/Keyboard.js

@@ -717,6 +717,29 @@ class SimpleKeyboard {
 
     if (typeof this.options.beforeFirstRender === "function")
       this.options.beforeFirstRender();
+
+    /**
+     * Notify about PointerEvents usage
+     */
+    if (
+      this.utilities.pointerEventsSupported() &&
+      !this.options.useTouchEvents
+    ) {
+      if (this.options.debug) {
+        console.log("Using PointerEvents as it is supported by this browser");
+      }
+    }
+
+    /**
+     * Notify about touch events usage
+     */
+    if (this.options.useTouchEvents) {
+      if (this.options.debug) {
+        console.log(
+          "useTouchEvents has been enabled. Only touch events will be used."
+        );
+      }
+    }
   }
 
   /**
@@ -868,6 +891,28 @@ class SimpleKeyboard {
           buttonThemeClass ? " " + buttonThemeClass : ""
         }`;
 
+        /**
+         * Handle button click event
+         */
+        /* istanbul ignore next */
+        if (this.utilities.pointerEventsSupported() && !useTouchEvents) {
+          /**
+           * PointerEvents support
+           */
+          buttonDOM.onpointerdown = e => {
+            if (this.options.preventMouseDownDefault) e.preventDefault();
+            this.handleButtonClicked(button);
+            this.handleButtonMouseDown(button, e);
+          };
+          buttonDOM.onpointerup = e => {
+            if (this.options.preventMouseDownDefault) e.preventDefault();
+            this.handleButtonMouseUp();
+          };
+          buttonDOM.onpointercancel = e => this.handleButtonMouseUp();
+        } else {
+          /**
+           * Fallback for browsers not supporting PointerEvents
+           */
           if (useTouchEvents) {
             buttonDOM.ontouchstart = e => {
               this.handleButtonClicked(button);
@@ -885,6 +930,7 @@ class SimpleKeyboard {
               this.handleButtonMouseDown(button, e);
             };
           }
+        }
 
         /**
          * Adding identifier

src/lib/services/Utilities.js

@@ -372,6 +372,13 @@ class Utilities {
     return "ontouchstart" in window || navigator.maxTouchPoints;
   }
 
+  /**
+   * Determines whether pointer events are supported
+   */
+  pointerEventsSupported() {
+    return window.PointerEvent;
+  }
+
   /**
    * Bind all methods in a given class
    */