Enable and disable an event without deleting and re-creating the event

Question

Enable and disable an event without deleting and re-creating the event

Navigation

#1 by (4 votes)
#2 by (2 votes)
#3 by (0 votes)

1

Is there any way to disable and enable an existing event on 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 running events from other objects.

To do this, when running such an event, all others are disabled.

The problem is that I can not 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 have to do the creation of these events again.

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

I'm using Jquery, however, if there is a way to resolve it directly through JavaScript, it's 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 though it is disabled.

Is this due to the type of the object or some header? In HTML I'm using strict DTD.

Another way to solve it 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.

javascript jquery

asked by anonymous 21.08.2015 / 10:30

3 answers

2

In foo () you can have a global variable that you enable or disable when you want, and when foo () is called you do an if 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; }

21.08.2015 / 13:07

0

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 on, it will record any changes to the inputs.

21.08.2015 / 13:51

Hide Div Jquery Set model property in javascript variable

score 4 · Accepted Answer

The idea that comes to mind is to use a kind of middleware and make every event handler go 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 this 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...
}