Question

我有一个基本上创建覆盖整个页面的叠加div元素的函数。它还将resize事件绑定到窗口，因此每当调整窗口大小时，叠加层也会更改其大小：

function stdOverlay() {
    var overlay = $('<div />').css({width : $(window).width(), height : $(window).height()});
    var overlayResize =
    function() {
        $(overlay).css({width : $(window).width(), height : $(window).height()});
    };
    $('body').append(overlay);
    $(window).resize(overlayResize);
    //... other codes,  like remove overlay and unbind the events
    //$('div.stdgui-overlay').unbind('resize', overlayResize);
}

每次调用该函数时，如果没有，则添加一个叠加层，并将resize事件绑定到窗口。当它应该删除重叠事件时，它也会取消绑定事件。如果overlayResize方法绑定到window元素，如何防止重复绑定？类似的东西：

    if(overlyResize is not bound to window)
        $(window).resize(overlayResize);
    else
        //do something else or do nothing;

Answer 1

你可以使用一个标志，但最简单的方法就是取消绑定然后重新绑定事件以确保它只绑定一次：

$(window).off('resize', overlayResize).on('resize', overlayResize);

Answer 2

最简单的方法是首先取消绑定，然后将事件处理程序绑定到此元素，如接受的答案中所述。

<强>演示：

＆＃13;

(function($) {
  $.fn.hasThisEventHandler = function(_event) { // convention:  event.namespace

    var elemEvents = $._data(this[0], 'events');

    if (elemEvents) {

      var ns = void 0;
      var evtName = _event;

      if (_event.indexOf(".")) {
        var eva = _event.split(".");
        evtName = eva[0];
        ns = eva[1];
      }

      var mm = elemEvents[evtName];

      if (mm && mm.length > 0) {

        if (ns === void 0) {
          return true;
        }

        if (ns) {
          for (var i = 0; i < mm.length; i++) {
            if (mm[i].namespace && mm[i].namespace === ns) {
              return true;
            }
          }
        }
      }
    }
    return false;
  }
}(jQuery));

$(document).on("mousemove.isMouseOverMe", function(e) {});
$("body").click(function() {});

console.log("mousemove.isMouseOverMe eventhandler bound to document: --> " + $(document).hasThisEventHandler("mousemove.isMouseOverMe"));

console.log("click eventhandler bound to body: --> " + $("body").hasThisEventHandler("click"));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如果你真的想检查，你可以使用这个插件：

(function ($) {
$.fn.hasThisEventHandler = function (_event) {  // convention:  event.namespace

var elemEvents = $._data(this[0], 'events');

if (elemEvents) {

    var ns = void 0;
    var evtName = _event;

    if (_event.indexOf(".")) {
        var eva = _event.split(".");
        evtName = eva[0];
        ns = eva[1];
    }

    var mm = elemEvents[evtName];

    if (mm && mm.length > 0) {

        if (ns === void 0) {
            return true;
        }

        if (ns) {
            for (var i = 0; i < mm.length; i++) {
                if (mm[i].namespace && mm[i].namespace === ns) {
                    return true;
                }
            }
        }
    }
}
return false;
}
} (jQuery));

如何检查事件是否绑定到元素，以防止重复绑定？

2 个答案: