CODEWITHSUNDEEP
javascriptjquery
Quesofat
Quesofat

Reputation: 1531

mouseenter event handler does not work the first time the event is called

I am writing a function to remove a class with the contents display:hidden; when the mouse enters a certain part of the DOM to show a menu. Now, when the page loads and I initially hover over the area, the event doesn't fire. BUT, if I move my mouse on it once, move away, then move back to the targeted element. It fires fine and the menu is unhidden.

codepen: http://codepen.io/anon/pen/EWYevq

jQuery: 

$(document).ready(function() {
      $('#kDropdown, .hidden-dropdown' ).mouseleave(function(e) {
        window.k = setTimeout(function(){
           $('.hidden-dropdown').addClass("hide_k");
        }, 250)
      }).mouseenter(function(e) {
        if(window.k){
          console.log("test")
          clearTimeout(window.k)
          $(".hidden-dropdown").removeClass("hide_k");
        }
      });
    })

Upvotes: 0

Views: 1991

Answers (4)

kind user
kind user

Reputation: 41893

Edit: It works even if the window.k is compared to anything. I highly doubt if this condition is obligatory here.

In your particular case:

window.k was returning undefined (false) value when you were hovering the box for the first time, that's why it was unable to pass the condition - the list was not appearing.

Check codepen, open the console and hover the box. The first log will be the undefined value.

If you hover the box for the second time, the list will appear because window.k is already set inside the mouseleave() function - it won't return undefined (false) from now on.


The working solution:

$(document).ready(function() {
  $('#kDropdown, .hidden-dropdown').mouseleave(function(e) {
    window.k = setTimeout(function() {
      $('.hidden-dropdown').addClass("hide_k");
    }, 250);
  }).mouseenter(function(e) {
    console.log("test")
    clearTimeout(window.k)
    $(".hidden-dropdown").removeClass("hide_k");
  });
})
.hide_k {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='kDropdown' style="background-color: black; height: 100px; width: 100px;"></div>

<div class="hide_k hidden-dropdown">
  <ul>
    <li>LIST</li>
    <li>THAT</li>
    <li>IS</li>
    <li>HIDDEN</li>
  </ul>
</div>

Upvotes: 1

MrProvolone
MrProvolone

Reputation: 106

The reason it isn't working the first time is because you don't set up window.k yet. Change this:

$('#kDropdown, .hidden-dropdown' ).mouseleave(function(e) {
    window.k = setTimeout(function(){

to this:

window.k=true;
$('#kDropdown, .hidden-dropdown' ).mouseleave(function(e) {
        window.k = setTimeout(function(){

What is happening is that you are checking if(window.k){} on mouseenter, and when the first "enter" happens, no mouseleave has happened yet to set window.k. Therefore your if(window.k) check in mouseenter returns false the first time. But then you leave the box, window.k gets set, and then it works from there becuase your if(window.k) statement then returns true (as the first mouseleave event finally set it). Hope that makes sense! Basically it is a timing issue, and you just need to set window.k = true before you do anything else.

Upvotes: 0

Ja9ad335h
Ja9ad335h

Reputation: 5075

it's not firing on first time because there is no window.k yet.

once mouseleave its get assigned. so working from second time on wards.

to get this work, move $(".hidden-dropdown").removeClass("hide_k"); outside the if(window.k) condition.

Here is a working Code Pen

$(document).ready(function() {
  $('#kDropdown, .hidden-dropdown').mouseleave(function(e) {
    window.k = setTimeout(function() {
      $('.hidden-dropdown').addClass("hide_k");
    }, 250)
  }).mouseenter(function(e) {
    if (window.k) {
      clearTimeout(window.k)
    }
    $(".hidden-dropdown").removeClass("hide_k");
  });
})
.hide_k { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='kDropdown' style="background-color: black; height: 100px; width: 100px;"></div>

<div class="hide_k hidden-dropdown">
  <ul>
    <li>LIST</li>
    <li>THAT</li>
    <li>IS</li>
    <li>HIDDEN</li>
  </ul>
</div>

Upvotes: 0

cristiancastrodc
cristiancastrodc

Reputation: 157

Are you sure that you need this line?

if(window.k) {

The first time that you enter, that variable is not assigned, so the event is not fired. If you remove that line the effect works as desired.

Upvotes: 0

Related Questions