或者...

Question

所以我制作了这个叠加功能，而且我也点击了它自己的叠加层。问题是我每次运行函数（$overlay.click(function() {...}）时绑定click事件，我认为这对性能有害。有什么想法吗？

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

如果您必须在该函数中保留click事件，请使用.on()和.off()，然后在定义.off("click")之前定义on("click")：

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

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

您甚至可以将click事件命名为这样，这样它只会删除该点击实例（如果其他事件被添加到其他地方）：

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

或者...

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

Answer 2

替代实施使用jQuery's .on() method combined with event delgation。他的意思是你允许click事件通过DOM冒泡到一个父元素，该元素将始终存在，它将捕获并处理事件，而不是每次创建它时都必须将它重新绑定到动态元素。 / p>

这看起来像

Get-Service wuauserv | select Status, Name, DisplayName, @{l="ComputerName";e={$_.MachineName}}

每次运行函数时如何避免设置on click绑定事件

2 个答案:

或者...