javascript - 如何避免每次运行函数时都设置点击绑定(bind)事件

Question

所以我制作了这个覆盖功能，而且我还让它在点击覆盖本身时关闭。问题是我每次运行函数 ($overlay.click(function() {...}) 时都会绑定(bind)点击事件，我认为这对性能不利。有什么想法吗？

function fluidOverlayShow(action, currentElement) {
  var $overlay = $('#fluid-overlay');
  if (action == 'open') {
    $overlay.click(function() {
      emgFluidOverlayShow('close', currentElement);
    });
    $(currentElement).addClass('fluid-bring-front');
    $overlay.addClass('fluid-anim-overlay');
    $overlay.data('statuson', true);
  } else if (action == 'close') {
    $overlay.removeClass('fluid-anim-overlay');
    $overlay.data('statuson', false);
    $('.fluid-header').find('.fluid-bring-front').removeClass('fluid-bring-front');
  }
}

$('#overlay_test').mouseover(function() {
  fluidOverlayShow('open', '#overlay_test');
});

$('#overlay_test').mouseout(function() {
  fluidOverlayShow('close');
});

#fluid-overlay {
  display: none;
  opacity: 0.3;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1000;
}

#overlay_test {
  position: relative;
}
  

#fluid-overlay.fluid-anim-overlay {
    display: block;
    -webkit-animation: fade-in-overlay 0.2s 1;
    -moz-animation:    fade-in-overlay 0.2s 1;
    animation:         fade-in-overlay 0.2s 1;
}

.fluid-bring-front {
    z-index: 1100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="javascript:;" id="overlay_test">Overlay test</a>
<div id="fluid-overlay"></div>

Answer 1

如果您绝对必须在函数中保留点击事件，那么使用 .on() 和 .off() 然后定义 .off("click") 在定义 on("click") 之前:

$overlay.off("click").on("click", function() {
  emgFluidOverlayShow('close', currentElement);
});

这将在添加之前删除事件绑定(bind)。

您甚至可以像这样为点击事件命名空间，这样它只会删除该点击实例(以防其他事件被添加到其他地方):

$overlay.off("click.fluidOverlayClose").on("click.fluidOverlayClose", function() {
  emgFluidOverlayShow('close', currentElement);
});

或者...

...按照 Guruprasad Rao 的建议将其移出函数(这是一种更好的处理方式)。