Блог

Я создаю веб-сайт с горизонтальной прокруткой и задаюсь вопросом, могу ли я отключить addEventListener, когда указатель курсора находится внутри элемента.

Вот пример.

 <div class="bar">Disable mousewheel event when the cursor pointer is within this div</div>

<script>
window.addEventListener("mousewheel", (e) => {

   if (e.deltaX === 0) {
      e.stopPropagation();
      e.preventDefault();
      window.scrollBy(e.deltaY, 0);
   }
});
</script>

 

Ключ не в том, чтобы «отключить» или «удалить» прослушиватель событий…

Ключ в том, чтобы знать, находится ли мышь над определенным элементом, чтобы сделать что-то еще …
(на самом деле, ничего не делать следует считать «чем-то другим»).

 let barFlag = false;

window.addEventListener("mousewheel", (e) => {
  if(!barFlag){
    console.log("mousewheel!")
  }else{
    console.log("No!")
  }
});

document.querySelectorAll(".bar").forEach(function(bar){
  bar.addEventListener("mouseenter", function(){
    barFlag = true;
  });
  bar.addEventListener("mouseleave", function(){
    barFlag = false;
  })
}) 

 .spacer{
  height: 500px;
}
.bar{
  height: 300px;
  border: 1px solid red;
} 

 <div class="spacer"></div>

<div class="bar">Disable mousewheel event when the cursor pointer is within this div</div>

<div class="spacer"></div>

<div class="bar">Disable mousewheel event here too</div>

<div class="spacer"></div>