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

using multiple events with the same function

本文关键字：事件 功能      更新时间：2023-09-26

我正在尝试清理我的代码。只是想知道是否有一种方法可以更好地编写这些代码？我在下面添加了一段代码：

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

用简单的方法，您可以使用.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"

相关文章：