Always make wheel listeners not passive to allow preventDefault (#3939)

* always make wheel listeners passive to allow preventDefault (fixes #3938) * update changelog * fix linting * fix missing function call * integrate pr feedback
scalableminds · Mar 25, 2019 · 3c11e92 · 3c11e92
1 parent 27a8e4f
commit 3c11e92
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -34,6 +34,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - Fixed interpolation along z-axis. [#3888](https://github.com/scalableminds/webknossos/pull/3888)
 - Fixed that the halo of the active node could cover other nodes. [#3919](https://github.com/scalableminds/webknossos/pull/3919)
 - Fixed that the 3D viewport was partially occluded due to clipping distance issues. [#3919](https://github.com/scalableminds/webknossos/pull/3919)
+- Fixed that scrolling with the mouse wheel over a data viewport also scrolled the page. This bug appeared with the new Chrome version 73. [#3939](https://github.com/scalableminds/webknossos/pull/3939)
 
 ### Removed
 - Removed FPS meter in Annotation View. [#3916](https://github.com/scalableminds/webknossos/pull/3916)

diff --git a/frontend/javascripts/libs/input.js b/frontend/javascripts/libs/input.js
@@ -385,7 +385,13 @@ export class InputMouse {
     );
     _.extend(
       this.delegatedEvents,
-      Utils.addEventListenerWithDelegation(document, "wheel", this.targetSelector, this.mouseWheel),
+      Utils.addEventListenerWithDelegation(
+        document,
+        "wheel",
+        this.targetSelector,
+        this.mouseWheel,
+        { passive: false },
+      ),
     );
 
     this.hammerManager = new Hammer(this.domElement, {

diff --git a/frontend/javascripts/libs/utils.js b/frontend/javascripts/libs/utils.js
@@ -442,12 +442,36 @@ export function isNoElementFocussed(): boolean {
   return document.activeElement === document.body;
 }
 
+// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
+const areEventListenerOptionsSupported = _.once(() => {
+  let passiveSupported = false;
+
+  try {
+    const options = {
+      // $FlowIgnore
+      get passive() {
+        // This function will be called when the browser
+        //   attempts to access the passive property.
+        passiveSupported = true;
+        return true;
+      },
+    };
+
+    window.addEventListener("test", options, options);
+    window.removeEventListener("test", options, options);
+  } catch (err) {
+    passiveSupported = false;
+  }
+  return passiveSupported;
+});
+
 // https://stackoverflow.com/questions/25248286/native-js-equivalent-to-jquery-delegation#
 export function addEventListenerWithDelegation(
   element: HTMLElement,
   eventName: string,
   delegateSelector: string,
   handlerFunc: Function,
+  options: Object = {},
 ) {
   const wrapperFunc = function(event: Event) {
     // $FlowFixMe Flow doesn't know native InputEvents
@@ -459,7 +483,11 @@ export function addEventListenerWithDelegation(
       }
     }
   };
-  element.addEventListener(eventName, wrapperFunc, false);
+  element.addEventListener(
+    eventName,
+    wrapperFunc,
+    areEventListenerOptionsSupported() ? options : false,
+  );
   return { [eventName]: wrapperFunc };
 }
 

diff --git a/frontend/javascripts/navbar.js b/frontend/javascripts/navbar.js
@@ -144,7 +144,6 @@ function StatisticsSubMenu({ collapse, ...menuProps }) {
 function HelpSubMenu({ isAdmin, version, collapse, ...other }) {
   return (
     <SubMenu
-      key="helpMenu"
       title={
         <CollapsibleMenuTitle
           title="Help"
@@ -312,7 +311,12 @@ function Navbar({ activeUser, isAuthenticated, history, isInAnnotationView, hasO
   }
 
   menuItems.push(
-    <HelpSubMenu version={version} isAdmin={isAdmin} collapse={collapseAllNavItems} />,
+    <HelpSubMenu
+      key="helpMenu"
+      version={version}
+      isAdmin={isAdmin}
+      collapse={collapseAllNavItems}
+    />,
   );
 
   // Don't highlight active menu items, when showing the narrow version of the navbar,