Подавить временную обработку событий jQuery - PullRequest
Новая
       7

Подавить временную обработку событий jQuery

20 голосов
/ 27 ноября 2009

Существует ли элегантный способ временного подавления событий jQuery? Я использую такой код: 

$(element).unbind(event, function1).unbind(event, function2);
// code for which the event is suppressed
$(element).bind(event, function1).bind(event, function2);

но я нахожу это немного неуклюжим и не очень масштабируемым для многих событий. Почему я хочу временно подавить события? Я использую плагин BlockUI для блокировки пользовательского интерфейса во время доступа Ajax. Это делается с помощью: $ (). AjaxStart ($. BlockUI) .ajaxStop ($. UnblockUI) , как предложено BlockUI.

Однако один Ajax-доступ является специальным, поэтому мне нужно другое сообщение. События ajaxStart и ajaxStop влияют на код сообщения (ничего не отображается): 

function message(text, callback) {
  if (text == undefined) {
     $.unblockUI();
     return;
  }

  // $().unbind('ajaxStop', $.unblockUI).unbind('ajaxStart', $.blockUI);
  $("#message_text").html(text);
  $.blockUI({message: $("#message")});
  $("#message_ok").click(function() { 
    // $().bind('ajaxStop', $.unblockUI).bind('ajaxStart', $.blockUI);
    $.unblockUI();
    if (callback != undefined) callback();
  });
}

Только если я раскомментирую строки unbind () и bind (), это работает.

Ответы [ 6 ]

14 голосов
/ 23 мая 2012

Я понимаю, что этот вопрос старый, но я нашел его, когда искал ответ на тот же вопрос, и в итоге нашел другое решение, которое хорошо работает в простых приложениях обработчиков событий. 

$(element).click(function(e) {
  e.preventDefault();

  // Check for fired class
  if ($(this).hasClass('fired') == false) {
     // Add fired class to all instances of element
     $(element).addClass('fired');

     // Do the rest of the function...

     // Remove fired class to 'reactivate' events
     $(element).removeClass('fired');   
  }
}

Простое добавление класса к элементу в то время, когда запускается код из события, позволяет вам предотвратить дальнейшее выполнение кода в результате другого события щелчка. Таким образом, хотя вы на самом деле не запрещаете никакие другие события щелчка, вы не позволяете запустить полученный код. Простой, грубый, игнорирует широко проповедуемое использование bind и unbind, но работает.

10 голосов
/ 27 ноября 2009

стоило мне закончить этот скрипт, я надеюсь, что он полезен: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript">
$(function(){

    //ini plugin

    jQuery.event.freezeEvents = function(elem) {

        if (typeof(jQuery._funcFreeze)=="undefined")
            jQuery._funcFreeze = [];

        if (typeof(jQuery._funcNull)=="undefined")
            jQuery._funcNull = function(){ };

        // don't do events on text and comment nodes
        if ( elem.nodeType == 3 || elem.nodeType == 8 )
            return;

        var events = jQuery.data(elem, "events"), ret, index;

        if ( events ) {

            for ( var type in events )
            {
                if ( events[type] ) {

                    var namespaces = type.split(".");
                    type = namespaces.shift();
                    var namespace = RegExp("(^|\\.)" + namespaces.slice().sort().join(".*\\.") + "(\\.|$)");

                    for ( var handle in events[type] )
                        if ( namespace.test(events[type][handle].type) ){
                            if (events[type][handle] != jQuery._funcNull){
                                jQuery._funcFreeze["events_freeze_" + handle] = events[type][handle];
                                events[type][handle] = jQuery._funcNull;
                            }
                        }
                }

            }
        }
    }

    jQuery.event.unFreezeEvents = function(elem) {

        // don't do events on text and comment nodes
        if ( elem.nodeType == 3 || elem.nodeType == 8 )
            return;

        var events = jQuery.data(elem, "events"), ret, index;

        if ( events ) {

            for ( var type in events )
            {
                if ( events[type] ) {

                    var namespaces = type.split(".");
                    type = namespaces.shift();

                    for ( var handle in events[type] )
                        if (events[type][handle]==jQuery._funcNull)
                            events[type][handle] = jQuery._funcFreeze["events_freeze_" + handle];

                }
            }
        }
    }

    jQuery.fn.freezeEvents = function() {

        return this.each(function(){
            jQuery.event.freezeEvents(this);
        });

    };

    jQuery.fn.unFreezeEvents = function() {

        return this.each(function(){
            jQuery.event.unFreezeEvents(this);
        });

    };

    //end plugin

    jQuery("#test1").ajaxStart(function test1(){
        jQuery("#result").append('test1 ajaxStop<br>');
    });

    jQuery("#test1").ajaxStop(function test2(){
        jQuery("#result").append('test1 click<br>');
    });

    jQuery("#test1").bind("click", function test3(){
        jQuery("#result").append('test1 click<br>');
    });

    jQuery("#test2").bind("click", function test5(){
        jQuery("#result").append('test2 click<br>');
    });

    jQuery("#freez").click(function(){
        jQuery("#test1").freezeEvents();
        jQuery("#test2").freezeEvents();
    });

    jQuery("#unfreez").click(function(){
        jQuery("#test1").unFreezeEvents();
        jQuery("#test2").unFreezeEvents();
    });

});
</script>
</head>
<body>
<button id="freez">freez</button>
<button id="unfreez">un freez</button>
<br />
<div id="test1">test1 click mousemove</div>
<div id="test2">test2 click mousemove</div>
<br />
<div id="result"></div>
</body>
</html>
5 голосов
/ 06 ноября 2012

Мне очень понравился подход Андреса к этой проблеме, но, похоже, с тех пор, как он разработал этот код, модель событий jQuery изменилась, поэтому в последних версиях jQuery его код не работает. Здесь это модернизировано. Проверено (слегка) в 1.8.2: 

$.event.freezeEvents = function(elem) {

        if (typeof($._funcFreeze)=="undefined") {
            $._funcFreeze = [];
        }

        if (typeof($._funcNull)=="undefined") {
            $._funcNull = function() {};
        }                

        // don't do events on text and comment nodes
        if ( elem.nodeType == 3 || elem.nodeType == 8 ) {
            return;
        }

        var events = $._data(elem, "events");

        if (events) {
            $.each(events, function(type, definition) {
                $.each(definition, function(index, event) {
                    if (event.handler != $._funcNull){
                        $._funcFreeze["events_freeze_" + event.guid] = event.handler;
                        event.handler = $._funcNull;
                    }
                })
            })
        }
    }

    $.event.unFreezeEvents = function(elem) {

        // don't do events on text and comment nodes
        if ( elem.nodeType == 3 || elem.nodeType == 8 )
                return;

        var events = $._data(elem, "events");

        if (events) {
            $.each(events, function(type, definition) {
                $.each(definition, function(index, event) {
                    if (event.handler == $._funcNull){
                        event.handler = $._funcFreeze["events_freeze_" + event.guid];
                    }
                })
            })
        }
    }

    $.fn.freezeEvents = function() {
        return this.each(function(){
            $.event.freezeEvents(this);
        });
    };

    $.fn.unFreezeEvents = function() {
        return this.each(function(){
            $.event.unFreezeEvents(this);
        });
    };

Я не проверял это за исключением элемента с двумя событиями, но он прекрасно работает для меня. Надеюсь, это кому-нибудь поможет.

4 голосов
/ 27 ноября 2009

Самый простой способ сделать это - добавить проверку в начале связанного метода, чтобы определить, должен ли метод выполняться. Если нет, просто вернитесь из метода. 

var doThing = true;

$("#foo").bind("click", function(e) {
    if(!doThing){return;}
    //do thing
}

function bar(){
    //temp unbind click
    doThing = false;

    //do stuff...

    //rebind click
    doThing = true;
}
2 голосов
/ 13 августа 2015

Вы можете просто сохранить и восстановить весь объект событий: 

var events=$._data(elem, 'events'); // save events
$._data(elem, 'events', {}); // cancel all events
// any code here will not fire events
$._data(elem, 'events', events); // restore events

Это сработало для меня, но может иметь неизвестные побочные эффекты ...

1 голос
/ 27 ноября 2009

Так есть ли идея блокировать страницу, запускать несколько запросов AJAX (цепочки или иным образом), а затем разблокировать страницу?

Если это так (и я правильно понял вопрос), то вы могли бы использовать счетчик блоков?

например. var blockcounter = 0; 

function block(){
if(blockcounter==0)
 {$.blockUI({message: "Hai", showOverlay:true});}
blockcounter++;
}

function unblock(){
blockcounter--;
if(blockcounter==0)
{$.unblockUI();}
}

тогда в вашем коде 

function dostuff(){
block();
... do whatever ajax you need
... call unblock() in the success event of your ajax call
}

function dostuff2(){
block();
... do some more ajax - this might take a bit longer to complete though
... call unblock() in the success event
}

dostuff();
dostuff2();

Блокировка должна происходить только один раз, и вы можете делать все что угодно в середине.

Я успешно использую этот метод на веб-сайте, где между блокировкой и разблокировкой происходит несколько событий, и где различные события ajax могут завершаться в разное время. Если вы поместите все это в пространство имен, вы также можете избежать засорения места глобальными переменными.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...