onScroll() 在同一元素上禁用 mouseenter()

Question

我正在尝试为同一个元素绑定两个事件处理程序，但是当 onScroll() 被触发时，mouseenter 将无法正常工作并解决这个问题？

   var main = function() {
  $(window).scroll(function() {
 if ($(window).scrollTop() > 900) {

$(".swap").delay(900).animate({
        opacity: 1, 
        marginRight: 0
    }, 'slow'
);
 }
  });
 $(".swap").mouseenter(function(){

  $(".swap").fadeOut('fast', function() {
    $(".swap-hidden").fadeIn("slow");
    $(".mobile p").last().append('and tablets')
  });
  });

  };
  $(document).ready(main);

Answer 1

这是因为 mouseenter 需要实际的页面坐标（x 和 y）并且滚动会动态更改它们，因此您需要在每次滚动事件后重新绑定（或检查）mouseenter。

您的选择是：

将 mouseenter 切换为 hover。

像这样重写你的函数（将你的 mouseenter 函数包含到 document.ready 函数中：

var main = function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() > 900) {
            $(".swap").delay(900).animate({
                opacity: 1,
                marginRight: 0
            }, 'slow');
        }
        $(".swap").mouseenter(function() {
            $(".swap").fadeOut('fast', function() {
                $(".swap-hidden").fadeIn("slow");
                $(".mobile p").last().append('and tablets')
            });
        });
    };
});
$(document).ready(main);

onScroll() 在同一元素上禁用 mouseenter()

onScroll() disables mouseenter() on same element

mouseenter

onscroll