Question

当鼠标离开该元素时，我需要添加一些延迟吗？ SetTimeout在“if”中不起作用： - /

$('#tools .has-tooltip').on('mouseover', function () {
    $('#tools .has-tooltip').removeClass('hover')
    $(this).addClass('hover');
}).on('mouseout', function (e) {
    if ((!$(e.target).is('input')) && (!$('input').is(":focus"))) {
        $(this).removeClass('hover');
    }
});

Answer 1

（我假设你有充分的理由在这里使用javascript而不是CSS :hover规则。）

setTimeout会有效 - 您可能会失去this的上下文。如果您可以使用ES6格式，则可以使用胖箭头函数保留现有this：

＆＃13;

var timeoutID = false; // We'll use this to cancel any existing timeouts before setting a new one

$('#tools .has-tooltip').on('mouseover', function() {
  if (timeoutID) {
    window.clearTimeout(timeoutID);
  }

  $('#tools .has-tooltip').removeClass('hover')
  $(this).addClass('hover');
}).on('mouseout', function(e) {
  if ((!$(e.target).is('input')) && (!$('input').is(":focus"))) {
    timeoutID = window.setTimeout(() => {
      $(this).removeClass('hover');
    }, 1000);
  }
});

＆＃13;

.hover {
  background-color: #FFC
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tools">
  <div class="has-tooltip">Hover me</div>
</div>

＆＃13;

或者，将this存储在可以在setTimeout函数中使用的临时变量中：

...
var self = this;
window.setTimeout(function() {
  $(self).removeClass('hover');
},1000);
...

MouseOut on功能时的安装延迟

1 个答案: