Enable and disable an event without deleting and recreating it

Question

Is there any way to disable and activate an existing event in an object?

Example, I have an event in an element <img onclick="foo();">

On this same page, there is an action where, while running, you need to prevent the user from performing events from other objects.

For this, when running such event, all others are disabled.

The problem is that I can’t find anything in the Jquery documentation regarding this.

The only way is to delete the event from the other objects and when you need to activate them again you need to re-create these events.

That way it works well, however, I think there could be something more economical like a simple "enable", "disable".

I am using Jquery, however, if there is a way to solve directly by Javascript, it is obviously quite valid.

I thought that disabling the object would work, but it does not work. Even with the object set to "disabled", events persist normally.

Example:

<img id="bar" onclick="foo();">


/*
Tentei com attr() e prop(). Ambos não surtem efeito.
*/
//$('#bar').prop('disabled',true);
$('#bar').attr('disabled',true);

When you click on the object, it still triggers the event, even if it is disabled.

Is this due to the object type or some header? In HTML I am using Strict DTD.

Another way to solve would be to open a modal in front of the entire screen, preventing access to the bottom layer, but I want to avoid this for now.

Answer 1

The idea that comes to mind is to use a kind of "middleware" and get all the Vent Handler to come by. There you can have a flag object with boolean information for each event. Something like:

(function(){ // com esta closure a variável flag não precisa ser global
    var flag = {
        click: false,
        mouseleave: false;
    };
    elA.addEventListener('click', middleware)
    elB.addEventListener('click', middleware)
    elA.addEventListener('mouseleave', middleware)
    elB.addEventListener('mouseleave', middleware)
    function middleware(e){
        // ver em baixo
    }
})();

and then, within that function, have the logic you need for that verification:

function middleware(e){
    var tipoEvento = e.type;
    var elemento = this; // elemento que tem/disparou o event handler
    var alvo = e.target;

    // e a partir daqui podes ter uma lógica de if/else que detete o que precisas

    if (flag.click) foo();
    else bar();

    // etc...
}

Answer 2

inside foo() can have a global variable that you enable or disable when you want, and when foo() is called you make an if by checking the global variable

    flag_global = 0;

function foo(){

    if( flag_global == 0){ return 0; }
    ...
    ...
    ...
    return 1;
}

function habilitar(){ flag_global=1; }

function desabilitar(){ flag_global=0; }

Answer 3

follows an alternative using an eventHandler:

var eventHandle  =  {
    flag: 0,
    elements: {
    	input01: document.getElementById("input01"),
        input02: document.getElementById("input02"),
        input03: document.getElementById("input03"),
        monitorOn: document.getElementById("monitorOn"),
        monitorOff: document.getElementById("monitorOff")
    },
    init: function() {
        this.elements.input01.addEventListener("input", this, false);
    	this.elements.input02.addEventListener("input", this, false);
    	this.elements.input03.addEventListener("input", this, false);
        this.elements.monitorOn.addEventListener("click", this, false);
        this.elements.monitorOff.addEventListener("click", this, false);
    },    
    handleEvent: function(event) {
        //não entendo por que consigo acessar o input#input01 atraves do "input01" 
        //e não apenas pelo "this.elements.input01", 
        //alguem pode me esplicar a logica deste escopo?
        //console.log(input01, this.elements.input01)
        if (this.checkEvent(event, this.elements.input01, "input", 1)) {
            this.onInput01(event);
        }
        if (this.checkEvent(event, this.elements.input02, "input", 1)) {
            this.onInput02(event);
        }
        if (this.checkEvent(event, this.elements.input03, "input", 1)) {
            this.onInput03(event);
        }
        if (this.checkEvent(event, this.elements.monitorOn, "click", 0)) {
            this.onMonitorOnClick(event);
        }
        if (this.checkEvent(event, this.elements.monitorOff, "click", 1)) {
            this.onMonitorOffClick(event);
        }
    },
    checkEvent: function(event, element, type, flag) {
        return event.target == element && event.type == type && this.flag == flag;
    },
    onInput01: function(event) {
        console.log(event.target.value)
    },
    onInput02: function(event) {
        console.log(event.target.value)
    },
    onInput03: function(event) {
        console.log(event.target.value)
    },
    onMonitorOnClick: function(event) {
        this.flag = 1;
    },
    onMonitorOffClick: function(event) {
        this.flag = 0;
    }
};

eventHandle.init();

<div>
    <input id="input01" type="text" />
</div>
<div>
    <input id="input02" type="text" />
</div>
<div>
    <input id="input03" type="text" />
</div>
<div>
    <input id="monitorOn" type="button" value="Ligar Monitor" />
</div>
<div>
    <input id="monitorOff" type="button" value="Desligar Monitor" />
</div>

In the example above, if the monitor is turned on, it will record which change in inputs.