Непонятное поведение при перекрытии событий прокрутки и событий колеса - PullRequest
Новая
       36

Непонятное поведение при перекрытии событий прокрутки и событий колеса

1 голос
/ 11 июля 2020 

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

Когда колесо мыши приводится в действие в первый раз, я думаю, что отображается только «колесо», а window.addEventListener("scroll",function(){...}) нужно только зарегистрировать. Однако, глядя на вывод, «колесо» и «прокрутка» выводятся одновременно.

2. 

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

Когда колесо мыши приводится в действие в первый раз, выводится только «прокрутка», как я и ожидал. Однако при повторном использовании он выводится в порядке «колесо» «прокрутка». Почему сначала вывод колеса?

1 Ответ

0 голосов
/ 11 июля 2020

Чтобы лучше понять это, я предоставил: 

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

Пожалуйста, просто нажмите «стрелку вниз» в представлении и увидите консоль., Будет напечатана только «прокрутка». -> это так не триггерное колесо,

Но если вы используете «Колесо мыши» для прокрутки, вы увидите как «колесо», так и «прокрутку» в качестве вывода в консоли.

Подробнее:

scroll Срабатывает, когда пользователь прокручивает элемент любым способом (клавишами со стрелками, полосой прокрутки или колесом мыши). Вы не можете предотвратить прокрутку.

Wheel Срабатывает, когда пользователь использует колесико мыши. Вы можете предотвратить это событие по умолчанию. Обратите внимание, что для запуска этого события страницу не нужно прокручивать. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...