IE 和 Edge 中的 Mousewheel 和 dommousescroll 事件

Question

我有这个代码：

<!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>

它适用于 Chrome 和 Firefox。但是，它不适用于我的笔记本电脑 dell xps 13 9434 在 IE 和 edge 中的触摸板。但它确实适用于（某些）其他笔记本电脑的触摸板。该怎么办？ jQuery没问题。

"what doesn't work?" => 像您在浏览器中滚动时那样使用 2 根手指滚动时没有提示。

Answer 1

编辑

经过一番研究，问题似乎是微软的问题。

EdgeHTML issue tracker 中有一个未解决的问题已经将近一年了。

基本上它说在使用 Precision Touchpads.

时 wheel 事件在 Edge（和旧的 IE 版本）中不起作用

顺便说一句，我没有删除其余答案，因为它仍然相关。无论如何，您应该使用 wheel。

你应该听 wheel:

window.addEventListener('wheel', mouseWheelEvent);

它已经取代了 mousewheel and DOMMouseScroll which are deprecated by now and is supported by all browsers。

跨浏览器示例：

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>

和JSFiddle demo

Answer 2

一些旧的IE版本不支持addEventListener，它们支持attachEvent。

试试跨浏览器 addEventListener:

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

注意页面高度：没有偏移就不行。如果你的页面没有偏移量，那么使用这个：

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

Answer 3

从EdgeHTML 17开始，微软支持指针事件来解决这个问题。

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

截至今天，除 Safari 之外的所有主要浏览器都支持指针事件：

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

IE 和 Edge 中的 Mousewheel 和 dommousescroll 事件

Mousewheel & dommousescroll event in IE & Edge

javascript

internet-explorer

mouseevent

multi-touch

microsoft-edge