jquery

Question

$("button").on("click", () => {
    console.log($("button").is(":hover"));
  window.scrollTo(0,0);
  console.log($("button").is(":hover"));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin-top:600px;">
CLICK
</button>

// method called on button click

showTab(n) {
    this.tabs.each((idx, tab) => {
        $(tab).hide();
    });

    $(this.tabs[n]).show();
    this.currentTab = parseInt(n);
    window.scrollBy(-100, -100);
    window.scrollTo(0,0);
}

在该代码的末尾 NextButton.is(":hover") returns 正确，它也以按钮样式显示。我不知道为什么。有任何想法吗？有没有办法用 jQuery 来“取消悬停”按钮？

Answer 1

函数调用是异步的。因此，在调用 scrollTo(..) 后立即执行 console.log(..)，同时仍将鼠标悬停在按钮上。

为了避免这种行为，您通常会使用 callback function，它会在您的初始函数完成后被调用。

$("button").on("click", function(){
  console.log($("button").is(":hover"));
  $('html').animate({
    scrollTop: 0
  }, 500, function() {
     // gets executed after the animation has finihsed
     console.log($("button").is(":hover"));
  });
  
})

button {
  position:absolute;
  top: 650px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>
  CLICK
</button>

jquery - 按钮在 scrollBy 之后悬停

jquery - button is hovered after scrollBy

scroll

button