单击更改类有时会卡住

Question

我有这段代码，它可以完成所需的工作，但有时会卡住（单击时有时不会更改类）。为什么？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

问题是因为您要嵌套事件处理程序；在这种情况下click中的mouseenter。这样，您每次在按钮上发生任何事情时都会创建另一个单击处理程序。

从代码的上下文来看，您似乎希望“模式”在按钮悬停时隐藏/显示，但在单击按钮时也保持可见。这样，您可以向模式中添加一个类，您可以检查该类，然后在相关事件触发时不隐藏该元素。

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

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

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

$('#button').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才能使代码段正常运行。