IE 和 Edge 中的 Mousewheel 和 dommousescroll 事件答案

【问题标题】：Mousewheel & dommousescroll event in IE & EdgeIE 和 Edge 中的 Mousewheel 和 dommousescroll 事件
【发布时间】：2017-06-20 03:21:37
【问题描述】：

我有这个代码：

<!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 没问题。

“什么不起作用？” => 使用 2 根手指（就像您在浏览器中滚动一样）时，滚动不会出现警报。

【问题讨论】：

根据您从滚动事件接收到的信息类型，您可以将其与touchstart、touchend、touchmove 事件组合/替换。更多详情请见mozilla docs

标签： javascript internet-explorer mouseevent multi-touch microsoft-edge

【解决方案1】：

编辑

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

EdgeHTML issue tracker 已经有一个关于它的未决问题已经快一年了。

基本上它说 wheel 事件在使用 Precision Touchpads 时在 Edge 中不起作用（以及较旧的 IE 版本）。

顺便说一句，我不会删除其余的答案，因为它仍然相关。无论如何你都应该使用wheel。

你应该听wheel:

window.addEventListener('wheel', mouseWheelEvent);

它已经取代了 mousewheel 和 DOMMouseScroll，它们现在已被弃用，并且是 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

【讨论】：

Hodor 哈哈很好......但很抱歉仍然无法在戴尔 xps 13 9343 上的 IE(11.576.14393.0) 和 Edge(14.14393) 中工作
是的。我很久以前就打开了那个问题。亲自和通过社交媒体与许多 Edge PM 交谈。他们似乎不想修复它。它现在也影响 Windows 10 Creator's Update 的新屏幕触控板，因为操作系统将其视为虚拟精密触控板。新问题在这里打开：developer.microsoft.com/en-us/microsoft-edge/platform/issues/…
您的代码 sn-p 是否有任何原因会触发事件，但是当我在应用程序中使用简单的 console.log in 回调以完全相同的方式添加轮事件侦听器时，它不会着火了？
@ColinD 不太确定.. 我想这不是 OP 的精确触摸板问题，因为我的 sn-p 在这种情况下也对您不起作用.. 在哪些浏览器中您的日志似乎没有去工作？你能做一个sn-p我去看看
感谢您的回复。我会看看我是否可以制作一个可重现的例子。目前仅在 Edge 中失败了

【解决方案2】：

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

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

截至目前，除 Safari 之外的所有主流浏览器都支持指针事件：

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

【讨论】：

哇。谢谢你。我正准备在某处使用“秘密”滚动条重写所有内容，只是为了让 'wheel' 工作。

【解决方案3】：

一些老版本的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

【讨论】：

感谢您的建议，但在戴尔 xps 13 9343 上的 IE(11.576.14393.0) 和 Edge(14.14393) 中无法使用
这很奇怪，因为我使用了你记下的版本。顺便说一句，我有两个 IE 安装：一个是“Microsoft EdgeHTML 14.14393，Microsoft Edge 38.14393.0.0”，在这个 versino attachEvent 中不起作用，另一个 IE 版本是：11.576.14.393.0，这里的技巧很好用. @Mart，当你解决这个问题时告诉我，我是古玩！ :)