重叠滚动事件和控制盘事件时的意外行为



window.addEventListener("wheel",function(){
console.log("wheel");
window.addEventListener('scroll', function(e){
console.log("scroll");
});
})

当第一次操作鼠标滚轮时;"轮子";并且仅需要注册CCD_ 1。然而,从输出来看;"轮子";以及";滚动";同时输出。

2.

window.addEventListener("scroll",function(){
console.log("scroll");

window.addEventListener('wheel', function(e){
console.log("wheel");
});
});

当鼠标滚轮第一次操作时;滚动";正如我所期望的那样输出。然而,如果再次操作,则按"0"的顺序输出;"轮子"滚动";。为什么车轮首先输出?

为了更好地理解这一点,我提供了

<body style="height: 150vh;">

请按";向下箭头";在视图中,并查看控制台。,仅";滚动";将被打印-->它不会触发轮子,

但是如果你使用";鼠标滚轮";要滚动,您将看到两个";"轮子";以及";滚动";作为控制台中的输出。,

更多信息:

滚动当用户通过任何方式(箭头键、滚动条或鼠标滚轮(滚动元素时激发。您无法阻止滚动。

滚轮当用户使用鼠标滚轮时激发。您可以阻止此事件的默认设置。请注意,页面不必滚动即可触发此事件。

window.addEventListener("scroll",function(){
console.log("scroll");}); 
window.addEventListener("wheel",function(){
console.log("wheel");});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="height: 150vh;">
<h1>test</h1>
<script src="test.js"></script>
</body>
</html>

最新更新