Use passive event listeners for touch events

Avoid this warning in Chrome console: https://www.chromestatus.com/feature/5745543795965952

2 files changed, 24 insertions, 4 deletions

diff --git a/ui/static/js/dom_helper.js b/ui/static/js/dom_helper.js
index 8a0644b..903e9a9 100644
--- a/ui/static/js/dom_helper.js
+++ b/ui/static/js/dom_helper.js
@@ -43,4 +43,23 @@ class DomHelper {
 
         return null;
     }
+
+    static hasPassiveEventListenerOption() {
+        var passiveSupported = false;
+
+        try {
+            var options = Object.defineProperty({}, "passive", {
+                get: function() {
+                    passiveSupported = true;
+                }
+            });
+
+            window.addEventListener("test", options, options);
+            window.removeEventListener("test", options, options);
+        } catch(err) {
+            passiveSupported = false;
+        }
+
+        return passiveSupported;
+    }
 }
diff --git a/ui/static/js/touch_handler.js b/ui/static/js/touch_handler.js
index 69488a5..a6c5c81 100644
--- a/ui/static/js/touch_handler.js
+++ b/ui/static/js/touch_handler.js
@@ -83,12 +83,13 @@ class TouchHandler {
 
     listen() {
         let elements = document.querySelectorAll(".touch-item");
+        let hasPassiveOption = DomHelper.hasPassiveEventListenerOption();
 
         elements.forEach((element) => {
-            element.addEventListener("touchstart", (e) => this.onTouchStart(e), false);
-            element.addEventListener("touchmove", (e) => this.onTouchMove(e), false);
-            element.addEventListener("touchend", (e) => this.onTouchEnd(e), false);
-            element.addEventListener("touchcancel", () => this.reset(), false);
+            element.addEventListener("touchstart", (e) => this.onTouchStart(e), hasPassiveOption ? { passive: true } : false);
+            element.addEventListener("touchmove", (e) => this.onTouchMove(e), hasPassiveOption ? { passive: true } : false);
+            element.addEventListener("touchend", (e) => this.onTouchEnd(e), hasPassiveOption ? { passive: true } : false);
+            element.addEventListener("touchcancel", () => this.reset(), hasPassiveOption ? { passive: true } : false);
         });
     }
 }