7

我正在TD双击可编辑表格元素：

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

但是，当我双击可编辑 div 内的文本时，双击事件会传播到父 td，从而导致不良后果。我还想阻止其他事件（select,mousedown等），因此为每个事件编写一个存根对我来说并不好看。

在此处输入图像描述

有没有办法禁用所有当前活动的 jQuery 事件处理程序并在之后启用它们？或者以某种方式停止将所有事件从可编辑 div 传播到其父母？

4

2 回答 2

10

或者以某种方式停止将所有事件从可编辑 div 传播到其父母？

它可能不是很可口，但专门禁用事件也不错：

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

（假设this是指您正在编辑的单元格。）

毕竟，事件的数量是有限的，并且on允许您在以空格分隔的字符串中列出它们并通过传递来禁用它们false。

然后，您可以通过将相同的列表false再次传递到off.

于 2013-02-13T08:53:48.977 回答
4

使用开/关 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);

更新

true如果事件必须不考虑，您还可以管理设置为的变量：

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();
});
于 2013-02-13T08:49:50.303 回答