wake-up-neo.net

Mousewheel & Dommousescroll Veranstaltung in IE & Kante

Ich habe diesen Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<script>
    window.addEventListener('DOMMouseScroll', mouseWheelEvent);
    window.addEventListener('mousewheel', mouseWheelEvent);

    function mouseWheelEvent() {
        alert(1);
    }
</script>
</body>
</html>

Es funktioniert in Chrome & Firefox. Es funktioniert jedoch nicht mit meinem Laptop Dell Xps 13 9434's Touchpad in IE & Edge. Es funktioniert jedoch mit den Touchpads anderer Notebooks. Was ist zu tun? jQuery ist kein Problem.

"was funktioniert nicht?" => Beim Scrollen wird keine Warnung angezeigt, wenn Sie zwei Finger verwenden, wie Sie zum Blättern in Browsern verwenden. 

javascriptinternet-explorermouseeventmulti-touchmicrosoft-edge
13
Mart

Bearbeiten

Nach einigen Nachforschungen scheint das Problem tatsächlich das von Microsoft zu sein.

In EdgeHTML issue tracker gibt es bereits seit fast einem Jahr ein offenes Problem.

Grundsätzlich heißt es, dass Wheel-Events in Edge (und älteren IE Versionen) nicht funktionieren, wenn Precision Touchpads verwendet wird.

Übrigens lösche ich nicht den Rest der Antwort, da sie immer noch relevant ist. Sie sollten stattdessen wheel verwenden.

Sie sollten wheel hören: _:

window.addEventListener('wheel', mouseWheelEvent);

Es hat sowohl mousewheel als auch DOMMouseScroll ersetzt, die inzwischen veraltet sind und von allen Browsern unterstützt sind.

Browserübergreifendes Beispiel:

window.addEventListener('wheel', mouseWheelEvent);   

function mouseWheelEvent() {
    console.log("Fired");
}
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>

Und JSFiddle Demo

13
Jaqen H'ghar

Einige ältere IE-Versionen unterstützen addEventListener nicht, sie unterstützen stattdessen attachEvent.

Versuchen Sie einen crossBrowser addEventListener:

if ( window.attachEvent ) {
 window.attachEvent('on'+eventType, yourHandler); // in your case "scroll"
} else {
 window.addEventListener ...
}

Achten Sie auf die Seitenhöhe: Wenn kein Versatz vorhanden ist, funktioniert sie nicht. Wenn sich auf Ihrer Seite kein Versatz befindet, verwenden Sie Folgendes:

document.attachEvent('onmousewheel', mouseWheelEvent); // the event is attached to document
0
misterwolf

Staring EdgeHTML 17 unterstützt Microsoft Pointer Events, um das Problem zu lösen. 

https://blogs.windows.com/msedgedev/2017/12/07/better-precision-touchpad-experience-ptp-pointer-events/

Zeigerereignisse werden ab heute von allen gängigen Browsern außer Safari unterstützt:

https://caniuse.com/#search=pointer

0
Hamed