CODEWITHSUNDEEP
javascriptjqueryeventshoverclick
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

when click, mouseleave is triggered?

window.onload = function() {
  $(".compartir").hover(function() {
    console.log('hover');
    var self = this;
    setTimeout($(self).addClass('ready'), 500);
  }, function() {
    var self = this;
    console.log('leave');
    setTimeout($(self).removeClass('ready'), 5000);
  });
  $(".compartir a").on('click', function(e) {
    if (!$(this).parents('.compartir').is('.ready')) {
      console.log('!ready');
      e.preventDefault();
    } else {
      console.log('ready');
    }
  });
};
.compartir {
  position: relative;
  height: 40px;
}
.compartir_box .social,
.compartir_box .showSocial {
  position: absolute;
  left: 0;
  top: 0;
  transition: 0.25s linear all;
}
.compartir_box .social {
  opacity: 0;
}
.compartir_box:hover .showSocial {
  opacity: 0;
}
.compartir_box:hover .social {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="compartir_box">
  <div class="compartir">
    <span class="showSocial">COMPARTIR</span>
    <div class="social">
      <a target="_blank" href="https://www.facebook.com/">facebook</a>
      <a target="_blank" href="https://www.facebook.com/">twitter</a>

    </div>
  </div>
</div>

I want to wait untill the options are visible, because on mobile devices the hover is also a tab, and it launches the link straight away ( without the user knowing which option yet.. ) ( that's why I included the ready class )

The problem is that seems that the ready class is removed at the onclick ( without delay )

Do you know any workaround??

PD: I don't know why but the jquery is not defined in the snippet even that I included jQuery... :s

Upvotes: 0

Views: 274

Answers (1)

mplungjan
mplungjan

Reputation: 177940

  1. Use an anonymous function to execute in the timeout
  2. Save the object to be used later. I prefer to save the jQuery object
  3. clear the timeout if needed

var tId;
$(function() {
  $(".compartir").hover(function() {
    console.log('hover');
    var $self = $(this);
    clearTimeout(tId);
    tId=setTimeout(function() { $self.addClass('ready')}, 500);
  }, function() {
    var $self = $(this);
    console.log('leave');
    clearTimeout(tId);
    tId=setTimeout(function() { $self.removeClass('ready')}, 5000);
  });
  $(".compartir a").on('click', function(e) {
    if (!$(this).parents('.compartir').hasClass('ready')) {
      console.log('!ready');
      e.preventDefault();
    } else {
      console.log('ready');
    }
  });
});
.compartir {
  position: relative;
  height: 40px;
}
.compartir_box .social,
.compartir_box .showSocial {
  position: absolute;
  left: 0;
  top: 0;
  transition: 0.25s linear all;
}
.compartir_box .social {
  opacity: 0;
}
.compartir_box:hover .showSocial {
  opacity: 0;
}
.compartir_box:hover .social {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="compartir_box">
  <div class="compartir">
    <span class="showSocial">COMPARTIR</span>
    <div class="social">
      <a target="_blank" href="https://www.facebook.com/">facebook</a>
      <a target="_blank" href="https://www.facebook.com/">twitter</a>

    </div>
  </div>
</div>

Upvotes: 2

Related Questions