如何避免每次函数都设置点击绑定事件运行

Question

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

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()，然后在定义 on("click") 之前定义 .off("click")，如下所示：

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

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

您甚至可以像这样为点击事件命名空间，这样它只会删除该点击实例（以防在其他地方添加其他事件）：

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

或者...

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

Answer 2

另一种实现方式是 jQuery's .on() method combined with event delgation。他的意思是你允许点击事件通过 DOM 冒泡到一个父元素，该元素将始终存在，它将捕获和处理事件，而不是每次创建时都必须将它重新绑定到动态元素。

这看起来像

 $("body").on("click","#fluid-overlay",function() {
     //code goes here
    });

如何避免每次函数都设置点击绑定事件 运行

How to avoid setting the on click bind event every time the function is ran

javascript

jquery

overlay

或者...

如何避免每次函数都设置点击绑定事件运行