单击时，触发鼠标离开？答案

【问题标题】：when click, mouseleave is triggered?单击时，触发鼠标离开？
【发布时间】：2017-01-02 16:15:49
【问题描述】：

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>

我想等到选项可见，因为在移动设备上，悬停也是一个选项卡，它会立即启动链接（用户还不知道哪个选项..）（这就是我包含准备好的原因)

问题是ready 类似乎在 onclick 时被删除（没有延迟）

你知道任何解决方法吗？？

PD：我不知道为什么，但 jquery 没有在 sn-p 中定义，即使我包含了 jQuery...：s

【问题讨论】：

请使用$(function() { 而不是window.onload = function() {
@mplungjan 这不应该影响我的问题..
但这确实 - 它是无效的语法：setTimeout($(this).removeClass('ready'), 5000); - 它应该是 $(".compartir").hover(function() { var $that=$(this); console.log('hover'); setTimeout(function() { $that.addClass('ready')}, 500); }
@mplungjan 你能详细说明你的意思吗？
这更合乎逻辑：if (!$(this).parents('.compartir').hasClass('ready')) {

标签： javascript jquery events hover click

【解决方案1】：

使用匿名函数在超时内执行
保存对象以供以后使用。我更喜欢保存 jQuery 对象
根据需要清除超时

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>

【讨论】：