使用具有相同功能的多個事件

Question

我正在嘗試清理我的代碼。 只是想知道是否有辦法更好地編寫此代碼？ 我在下面添加了一段代碼：

$('.popUp-block').on("click",function() {
    $('.protect-field-container').removeClass('is-displayed');
    $(this).closest('.protect-field-container').addClass('is-displayed');
});

$('.popUp-block').hover(function() {
    $('.protect-field-container').removeClass('is-displayed');
    $(this).closest('.protect-field-container').addClass('is-displayed');
});

$('.popUp-block').focusout(function() {
    $('.protect-field-container').removeClass('is-displayed');
});

$('.popUp-block').on("mouseout", function() {
    $('.protect-field-container').removeClass('is-displayed');
});

Answer 1

通過簡單的方法，您可以使用.on()做到這.on() ：

$('.popUp-block').on("click mouseover",function() {
  $('.protect-field-container').removeClass('is-displayed');
  $(this).closest('.protect-field-container').addClass('is-displayed');
});

$('.popUp-block').on("mouseout focusout", function() {
  $('.protect-field-container').removeClass('is-displayed');
});

從文檔 ：

一種或多種以空格分隔的事件類型 和可選的名稱空間，例如"click"或"keydown.myPlugin" 。