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 に答える