javascript - 使用具有相同功能的多个事件

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() 来做到这一点:

$('.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');
});

来自docs :

One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".