Mousewheel & dommousescroll event in IE & Edge

2019-01-20 07:38发布

站内问答 / JavaScript
1674 3 4

I have this 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>

It works in Chrome & Firefox. However, it doesn't work with my laptop dell xps 13 9434's touchpad in IE & edge. But it does work with (some) other laptops' touchpads. What to do? jQuery is no problem.

"what doesn't work?" => There is no alert in scroll when using 2 fingers like you use to scroll in browsers.

3条回答
在下西门庆
2楼-- · 2019-01-20 08:17

Edit

After some research it seems that the problem is actually Microsoft's.

There is an open issue about it in EdgeHTML issue tracker for almost one year already.

Basically it says that wheel events do not work in Edge (And older IE versions) when using Precision Touchpads.

By the way I dont delete the rest of the answer as it is still relevant. You should use wheel instead anyway.

You should listen to wheel:

window.addEventListener('wheel', mouseWheelEvent);

It has replaced both mousewheel and DOMMouseScroll which are deprecated by now and is supported by all browsers.

Cross browser example:

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>

And JSFiddle demo

查看更多
0人赞 添加讨论(0) 举报
三岁会撩人
3楼-- · 2019-01-20 08:19

Staring EdgeHTML 17, Microsoft supports Pointer Events to solve the issue.

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

As of today, pointer events are supported by all major browsers except Safari:

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

查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
4楼-- · 2019-01-20 08:40

Some older IE version doesn't support addEventListener, they support attachEvent instead.

Try a crossBrowser addEventListener:

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

Pay attention to the page height: it won't work if there is no offset. If there is no offset in your page, then use this:

document.attachEvent('onmousewheel', mouseWheelEvent); // the event is attached to document
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)