javascript - 鼠标移开并单击

Question

当用户将鼠标悬停在一个 div 上时，它应该变为红色，当他们将鼠标移开时，它应该变回透明。当他们点击 div 时，它应该变为红色。

由于某种原因，鼠标移开事件监听器与单击事件监听器发生冲突。有人可以帮忙吗？当我点击 div 时，它不会变为红色。

div$.on('mouseover', function () {
  $(this).css('background-color', 'red');
});

div$.on('mouseout', function () {
  $(this).css('background-color', 'white');
});

div$.on('click', function () {
  $(this).css('background-color', 'red');
});

请注意，我必须为每个元素动态应用背景图片，因此使用 CSS 类添加背景图片是不可能的(因为我事先不知道)。

Answer 1

您可以设置一个 boolean 变量来确认点击已经发生，然后仅在变量为 false 时运行 mouseout 代码，如下所示:

var is_clicked = false;

div$.on('mouseover', function () {
  $(this).css('background-color', 'red');
});

div$.on('mouseout', function () {
  if(!is_clicked) {
    $(this).css('background-color', 'white');
  }
});

div$.on('click', function () {
  $(this).css('background-color', 'red');
  is_clicked = true;
});

注意:对于多个 div 元素用户多个 is_clicked 变量