CODEWITHSUNDEEP
javascriptjqueryjquery-events
warvariuc
warvariuc

Reputation: 59674

Temporarily disable all currently active jQuery event handlers

I am making a TD element of table editable on double click:

$(document).on("dblclick", "#table>tbody>tr>td.cell", function(e) {
    if (e.which != 1 || e.shiftKey || e.altKey || e.ctrlKey)
        // need left button without keyboard modifiers
        return;
    reset_selection();
    var editor = document.createElement("div");
    editor.setAttribute("contenteditable", "true");
    editor.innerHTML = this.innerHTML;
    this.innerHTML = '';
    // this.style.padding = 0;
    this.appendChild(editor);
    $(document).on("*", stub);
    editor.onblur = function() {
        // this.parentNode.setAttribute("style", "");
        this.parentNode.innerHTML = this.innerHTML;
        sys.editor = null;
        $(document).off("*", stub);;
    };
    editor.focus();
});

function stub(e) {
    e.stopImmediatePropagation();
    return false;
}

But when i double click on the text inside the editable div, the double click event propagates to the parent td causing undesired consequences. There are also other events (select, mousedown, etc) i want to prevent, so writing a stub for each of them doesn't look nice to me.

enter image description here

Is there a way to disable all currently active jQuery event handlers and enable them afterwards? Or somewhow stop propagating all events from the editable div to its parents?

Upvotes: 7

Views: 12077

Answers (2)

sdespont
sdespont

Reputation: 14025

Use on / off JQuery methods :

var myFunction = function(e) {
        if (e.which != 1 || e.shiftKey || e.altKey || e.ctrlKey)
            // need left button without keyboard modifiers
            return;
        reset_selection();
        var editor = document.createElement("div");
        editor.setAttribute("contenteditable", "true");
        editor.innerHTML = this.innerHTML;
        this.innerHTML = '';
        // this.style.padding = 0;
        this.appendChild(editor);
        $(document).on("*", stub);
        editor.onblur = function() {
            // this.parentNode.setAttribute("style", "");
            this.parentNode.innerHTML = this.innerHTML;
            sys.editor = null;
            $(document).off("*", stub);;
        };
        editor.focus();
};

function stub(e) {
    e.stopImmediatePropagation();
    return false;
}

//Active the events
$(document).on("dblclick", "#table>tbody>tr>td.cell", myFunction);

//Disable the events
$(document).off("dblclick", "#table>tbody>tr>td.cell",myFunction);

//Reactive the events
$(document).on("dblclick", "#table>tbody>tr>td.cell", myFunction);

Update

You can also manage a variable set to true if the event must not be taking into account :

var skipEvent = true;

$(document).on("dblclick", "#table>tbody>tr>td.cell", function (e) {
    //Check variable and skip if true
    if (skipEvent) 
        return false;

    if (e.which != 1 || e.shiftKey || e.altKey || e.ctrlKey)
    // need left button without keyboard modifiers
    return;
    reset_selection();
    var editor = document.createElement("div");
    editor.setAttribute("contenteditable", "true");
    editor.innerHTML = this.innerHTML;
    this.innerHTML = '';
    // this.style.padding = 0;
    this.appendChild(editor);
    $(document).on("*", stub);
    editor.onblur = function () {
        // this.parentNode.setAttribute("style", "");
        this.parentNode.innerHTML = this.innerHTML;
        sys.editor = null;
        $(document).off("*", stub);;
    };
    editor.focus();
});

Upvotes: 4

T.J. Crowder
T.J. Crowder

Reputation: 1075109

Or somewhow stop propagating all events from the editable div to its parents?

It may not be very palatable, but it's not that bad to specifically disable the events:

$(this).on("select mousedown mouseup dblclick etc", false);

(Assuming this refers to the cell you're editing.)

There is a limited number of events, after all, and on allows you to list them in a space-delimited string and disable them by passing false.

You can then re-enable them by passing the same list and false again into off.

Upvotes: 11

Related Questions