Disattivare temporaneamente tutti i gestori di eventi jQuery attualmente attivi

Question

Sto facendo un elemento TD di tabella modificabile sul doppio clic:

$(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; 
} 

Ma quando fare doppio clic sul testo all'interno del div modificabile, il doppio evento click si propaga a il genitore che causa conseguenze indesiderate. Ci sono anche altri eventi (select, mousedown, ecc.) Che voglio impedire, quindi scrivere uno stub per ognuno di essi non mi sembra piacevole.

C'è un modo per disattivare tutti i gestori di eventi jQuery attualmente attivi e consentire loro in seguito? O in qualche modo smettere di propagare tutti gli eventi dal div modificabile ai suoi genitori?

Answer 1

O in qualche modo interrompere la propagazione di tutti gli eventi dal modificabile div ai suoi genitori?

Esso non può essere molto appetibile, ma non è che male per disattivare specificamente gli eventi:

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

(. Assumendo this fa riferimento alla cella che si sta modificando)

C'è un numero limitato di eventi, dopotutto, e on consente di elencarli in una stringa delimitata da spazi e disabilitarli passando false.

È quindi possibile riattivarli passando la stessa lista e false nuovamente in off.

Answer 2

Usare on/off metodi JQuery:

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); 

Aggiornamento

È inoltre possibile gestire un insieme variabile true se l'evento non deve essere tenuto in considerazione:

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(); 
});