How to temporarily disable all event handlers attached to a control

Question

Is there a way to do.

$("#controlId").suspendEvents();

$("#controlId").resumeEvents();

I'm aware of preventDefault and stopPropagation. I want to do from outside the event. Please consider the following in your answer.

I cannot modify these bound events.
I do not know the bound events (Although it will be possible it will take me long time to do it). so it is not possible to .off() and then add them back one by one.

there is no public method supported for that although you could iterate through $._data(elem,'events') object which contains all events bound using jquery. For checking events bound using native javascript, you could check for respective attributes if inline binding event is use, i don't know if this can works for any other method of javascript binding handler, not tested. — A. Wolff, Jun 18 '13 at 09:03

score 1 · Accepted Answer · edited May 23 '17 at 11:56

I was able to put together answers from 2 other questions.

1.Bind an event handler to front of the queue

2.Attach handler to all events in a control

The idea is to bind an event handler with e.stopImmediatePropagation to front of the queue for all events. It seems crude i would be glad if this can be improved.

The solution...

$.fn.preBind = function (type, data, fn) {
    this.each(function () {
        var $this = $(this);

        $this.bind(type, data, fn);

        $.each(type.split(/ +/), function () {
            var currentBindings = $this.data('events')[this];
            if ($.isArray(currentBindings)) {
                currentBindings.unshift(currentBindings.pop());
            }
        });
    });
    return this;
};

$.fn.suspendEvents = function () {
    this.preBind("click keydown keyup keypress mouseover mouseenter  mouseout mouseleave mousedown mouseup mousemove change blur focus focusin focusout scroll resize load unload beforeunload", null, blockEvents);
}

$.fn.resumeEvents = function () {
    var _this = this;
    $.each("click keydown keyup keypress mouseover mouseenter  mouseout mouseleave mousedown mouseup mousemove change blur focus focusin focusout scroll resize load unload beforeunload".split(/ +/), function () {
        _this.unbind(this, blockEvents);
    });
}

function blockEvents(e) {
    e.stopImmediatePropagation();
}

Now i could use

$("#controlId").suspendEvents();
$("#controlId").resumeEvents();

EDIT: Modified resumeEvents() to overcome IE issue.

score 0 · Answer 2 · answered Jun 18 '13 at 08:59

0

everything bubbles up, so catch any event in body and prevent them.

alternative

var myCtlrs = $("all i want").attr("disabled", disabled");

then

myCtlrs.removeAttr("disabled");

answered Jun 18 '13 at 08:59

Luke

8,235
3
22
36

1

By the time it bubbles up its already executed right? or am i missing something. – Gnani Jun 18 '13 at 09:02
yeah you are right, but I thought you dont want to happen a link-execution or a submit... – Luke Jun 18 '13 at 09:05
@Luke disabled element seems the easiest way, but then you should use .prop('disabled',true) & .prop('disabled',false) which is the preconized way – A. Wolff Jun 18 '13 at 09:07
you can use what ever you want, jquery my style, jquery your style, vanilla style. There are tons of possibilities. But we are not talking about the preferred coding style. – Luke Jun 18 '13 at 09:09
@Luke I don't think disabling the elements will work for me as i have found script triggers in code. – Gnani Jun 18 '13 at 09:10

How to temporarily disable all event handlers attached to a control

2 Answers2