Question

单击按钮时是否有更有效的方式更改mouseout状态？单击按钮时，我希望click事件中的图像优先于mouseout事件中的图像。以下代码有效，但我不确定嵌套事件是否是一个好习惯。

$("#targetBtn").on({
   "mouseover" : function() {
      document.querySelector('#targetBtn img').src = 'images/_hover.png';
    },
    "mouseout" : function() {
      document.querySelector('#targetBtn img').src = 'images/_mouseout.png';
    },
    "click" : function() {
      document.querySelector('#targetBtn img').src = 'images/_selected.png';
      $(this).mouseout(function() {
          document.querySelector('#targetBtn img').src = 'images/_selected.png';
      });
    }
});

如果有人能够重构此代码并向我展示更好的方法，我们将不胜感激。此外，如果有人能解释为什么嵌套事件是坏的（如果确实如此），我也会很感激。

Answer 1

单击元素时，通过添加selected类可以简化这一过程。

目前的问题是，每次发生点击时都会添加新的mouseout事件处理程序。一个新的不删除旧的

以下内容将在悬停事件期间更改图像之前检查所选类是否存在

$("#targetBtn").on({
  "mouseover": function() {
    if (!$(this).hasClass('selected')) {
      $(this).find('img').attr('src ', 'images/_hover.png');
    }

  },
  "mouseout": function() {
    if (!$(this).hasClass('selected')) {
      $(this).find('img').attr('src ', 'images/_mouseout.png');
    }

  },
  "click": function() {
    $(this).toggleClass('selected');
    var imgSrc = $(this).hasClass('selected') ? 'images/_selected.png' : 'images/_hover.png';
    $(this).find('img').attr('src ', imgSrc);

  }
});

嵌套事件是Javascript / JQuery的一个好习惯吗？

1 个答案: