Mouseleave is called when hovering over Scrollbar VanillaJS

Question

Im using vanilla JS and I am getting a really annoying issue where if you hover the scrollbar of an element that has a mouseleave event listener the mouseleave will be called.

However, if you use the mouse wheel to scroll before hovering the element you will then be able to interact with the scrollbar without any issue at all.

This is the javascript:

var mainMenu = document.getElementById("mainTable");

mainMenu.addEventListener("mouseleave", function(evt) {
    console.log("exited");
  });

This is the element

<table id="mainTable" style="overflow-y:scroll;">
   <tbody>
      <tr>1</tr>
      <tr>2</tr>
      <tr>3</tr>
      <tr>4</tr>
      <tr>5</tr>
      <tr>6</tr>
   </tbody>
</table>

I believed that mouseleave worked with direct descendants of the element with the listener, so even without having to scroll the first time the scrollbar should act as a descendant.

Dimsquid · Accepted Answer · 2019-12-23 09:52:24Z

0

So to fix this I added in something to initialize the scrollbar

    var mainMenu = document.getElementById("mainTable");

    mainMenu.scroll(0,1);

    mainMenu.addEventListener("mouseleave", function(evt) {
      console.log("exited");
    });

This a bit of a bodge fix but currently working without an issue.

answered Dec 23, 2019 at 9:52

Dimsquid

5501 gold badge7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Mouseleave is called when hovering over Scrollbar VanillaJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related