单击更改 class 有时会卡住

Question

我有这段代码，它可以正常工作，但有时会卡住（点击有时不会更改 class）。为什么？ JSFiddle

$('#button').hover(function(e) {
  $('.box').css('animation', 'fade-in .3s forwards');
  $(this).css('background-color', 'blue');
  $(this).click(function() {
    if ($(this).hasClass('on')) {
      $(this).removeClass('on');
    } else {
        $('#button').removeClass();
      $(this).addClass('on');
    }
  });
}, function() {
  if ($(this).hasClass('on')) {
    return;
  } else {
    $('.box').css('animation', 'fade-out .3s forwards');
    $(this).css('background-color', 'red');
  };
})

Answer 1

问题是因为您嵌套了事件处理程序；在这种情况下，mouseenter 中的 click。因此，每当按钮发生某些事情时，您都会创建另一个点击处理程序。

从代码的上下文来看，您似乎希望 'modal' 到 hide/show 悬停在按钮上，但在单击按钮时也保持可见。因此，您可以将 class 添加到您可以检查的模式中，然后在相关事件触发时不隐藏该元素。

另请注意，您可以通过使用 CSS classes 而不是在 JS 逻辑中嵌入 CSS 规则来改进逻辑。试试这个：

let $modal = $('.modal');

$('#button').hover(function(e) {
  $modal.addClass('show');
}, function() {
  $modal.not('.on').removeClass('show');
}).on('click', function() {
  $(this).add($modal).toggleClass('on');
});

body {
  margin: 0 auto;
}

#button {
  background-color: red;
  width: 200px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}

#button.on {
  background-color: #0C0;
}

.modal {
  width: 500px;
  opacity: 0;
  height: 200px;
  margin: 0 auto;
  border: 1px solid grey;
  opacity: 0;
  transition: opacity .3s;
}

.modal.show {
  opacity: 1;
}

.modal h1,
p {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p id="button">BUTTON</p>
</div>
<div class="modal">
  <h1>Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

请注意，我必须将 SCSS 转换为普通的旧 CSS 才能使代码片段正常工作。

单击更改 class 有时会卡住

Changing class on click sometimes stuck

jquery

click

hover