web-dev-qa-db-fra.com

Mousewheel & dommousescroll event in IE Et bord

J'ai ce 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>

Cela fonctionne dans Chrome et Firefox. Cependant, cela ne fonctionne pas avec le pavé tactile de mon ordinateur portable Dell xps 13 9434 dans IE & Edge. Mais cela fonctionne avec (certains) touchpads des ordinateurs portables. Que faire? jQuery n'est pas un problème.

"Qu'est-ce qui ne marche pas?" => Il n'y a pas d'alerte dans le défilement lorsque vous utilisez 2 doigts comme vous utilisez pour faire défiler les navigateurs. 

javascriptinternet-explorermouseeventmulti-touchmicrosoft-edge
13
Mart

Modifier

Après quelques recherches, il semble que le problème soit en réalité celui de Microsoft.

Il y a un problème en suspens dans EdgeHTML Issue Tracker depuis presque un an déjà.

En gros, il est indiqué que les événements wheel ne fonctionnent pas dans Edge (et les versions antérieures IE) lors de l’utilisation de Precision Touchpads .

En passant, je ne supprime pas le reste de la réponse car elle est toujours pertinente. Vous devriez quand même utiliser wheel à la place.

Vous devriez écouter wheel :

window.addEventListener('wheel', mouseWheelEvent);

Il a remplacé les deux mousewheel _ et DOMMouseScroll _ qui sont obsolètes maintenant et est pris en charge par tous les navigateurs _.

Exemple de navigateur croisé:

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>

Et démo de JSFiddle

13
Jaqen H'ghar

Certaines versions plus anciennes de IE ne prennent pas en charge addEventListener, mais plutôt attachEvent.

Essayez un crossBrowser addEventListener:

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

Faites attention à la hauteur de la page: cela ne fonctionnera pas s'il n'y a pas de décalage. S'il n'y a pas de décalage dans votre page, utilisez ceci:

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

Staring EdgeHTML 17, Microsoft prend en charge les événements de pointeur pour résoudre le problème. 

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

À ce jour, les événements de pointeur sont pris en charge par tous les principaux navigateurs, à l'exception de Safari:

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

0
Hamed