0

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

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

每次调用该函数时，它都会添加一个覆盖（如果没有），并将调整大小事件绑定到窗口。当它应该删除覆盖事件时，它还会取消绑定事件。如何检查 overlayResize 方法是否绑定到窗口元素，以防止重复绑定？就像是：

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

2 回答 2

5

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

$(window).off('resize', overlayResize).on('resize', overlayResize);
于 2013-07-28T12:49:12.753 回答
0

最简单的事情是首先解除绑定，然后将事件处理程序绑定到这个元素，就像接受的答案中提到的那样。

演示：

(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"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

(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));
于 2017-03-01T22:48:42.390 回答