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

CHANGELOG.md

@@ -18,6 +18,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 ### Fixed
 - Fixed the setting which enables to hide the planes within the 3D viewport. [#3857](https://github.com/scalableminds/webknossos/pull/3857)
 - Fixed a bug which allowed the brush size to become negative when using shortcuts. [#3861](https://github.com/scalableminds/webknossos/pull/3861)
+- 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
 - 
@@ -78,7 +79,6 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - Added the possibility to use flight and oblique mode when viewing a dataset. [#3644](https://github.com/scalableminds/webknossos/pull/3644)
 - Added pagination to the REST API route `GET /projects/:name/tasks` (new optional parameters `limit` and `pageNumber`). [#3659](https://github.com/scalableminds/webknossos/pull/3659)
 - Added the possibility to open the version restore view for read-only tracings. Older versions can be previewed and be downloaded as NML. [#3660](https://github.com/scalableminds/webknossos/pull/3660)
->>>>>>> f4e956e20af7f5db60a11edb8a7cb0a0dac46a43
 
 ### Changed
 

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, {

frontend/javascripts/libs/utils.js

@@ -421,12 +421,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
@@ -438,7 +462,11 @@ export function addEventListenerWithDelegation(
       }
     }
   };
-  element.addEventListener(eventName, wrapperFunc, false);
+  element.addEventListener(
+    eventName,
+    wrapperFunc,
+    areEventListenerOptionsSupported() ? options : false,
+  );
   return { [eventName]: wrapperFunc };
 }