使用dataTables组件制做可编辑table单元格时blur、 mouseleave以及mouseenter事件的冲突

问题出现的场景是：
使用dataTables组件，可是该组件没有自带的编辑功能，因此须要本身处理table在行内编辑的效果。

目标效果是：
1.当hover到当前tr的时候，该行tr中能够编辑的td中出现一个input框：

2.当离开当前tr的时候，该行退出可编辑的状态，恢复到没有hover上去以前的效果。

3.当td变成可编辑状态，即出现了一个input输入框的时候，focus到input输入框中，能够输入number；当input框发生blur事件的时候，td恢复到非编辑状态：

因为blur和moseleave都会让输入框恢复到非编辑的状态，因此，这里的事件会有冲突。

在实际的编码中，在tr上绑定了mouseenter和mouseleave事件；

mouseenter事件的绑定：

function mouseenterEvt (e) {
    var tds = $(this).children('td');
    $.each(tds, function (i, val) {
        var jqob = $(val);
        if (i !== 3) {
            return true;
        }
        // if there is something validate wrong,stay there width no value exchange
        var validateSpanDom = jqob.find('span');
        var value = validateSpanDom ? validateSpanDom.text() : '';
        var validateTxt = validateInputBox(value);
        if(validateTxt) return false;
        // open edit mode
        jqob.addClass("edit-btn-display");
        var txt = jqob.text();
        txt = txt.replace('$', '');
        txt = txt.replace(/,/g, '');
        var put = $("<div class=\"money-budget-validate\"><input type='text' class='edit-input-box'><span></span></div>");
        put.children('.edit-input-box').val(txt);
        jqob.html(put);

    });
}
$("#table_id_example tbody").on("mouseenter", "tr",mouseenterEvt );

mouseleave事件的绑定：

$("#table_id_example tbody").on("mouseleave", "tr", function (e) {
    var row = tableDom.row($(this));
    var tds = $(this).children('td');

    $.each(tds, function (i, val) {
        var jqob = $(val);
        if (jqob.hasClass('edit-btn-display') && jqob.find('.edit-input-box').length > 0) {
            // if there is something validate wrong,stay there width no value exchange
            var validateSpanDom = jqob.find('span');
            var value = validateSpanDom ? validateSpanDom.text() : '';
            var validateTxt = validateInputBox(value);
            if(validateTxt) return false;
            var txt = jqob.find('.edit-input-box').val();
            txt = txt.replace('$', '');
            if(String(txt).indexOf('.') !== -1 ) {
                txt = Number(txt).toFixed(2);
            }
            jqob.html(txt);
            tableDom.cell(jqob).data(txt);
            // close edit mode
            jqob.removeClass("edit-btn-display");
        }
    });

    $("#table_id_example tbody").off("mouseenter", "tr",mouseenterEvt )
    $("#table_id_example tbody").on("mouseenter", "tr",mouseenterEvt )
});

在input输入框上绑定了blur事件：

blur事件的绑定：

$("#table_id_example tbody").on("blur", ".edit-input-box", function (e) {
    var value = $(this).val();
    var validateTxt = validateInputBox(value)
    if (!validateTxt) {
        var td = $(this).parents('td');
        var row = tableDom.row($(td));
        $(this).toggleClass("edit-btn-being-edit");
        var txt = $(this).val();
        txt = txt.replace('$', '');
        if(String(txt).indexOf('.') !== -1 ) {
            txt = Number(txt).toFixed(2);
        }
        td.html(txt);
        tableDom.cell(td).data(txt);//change data of DataTables obj
        var data = row.data();
        //alert('save current monthly-budget value')
        $("#table_id_example tbody").off("mouseenter", "tr",mouseenterEvt )
    }
});

对于事件解绑和从新绑定的解释：

• 当没有进行事件的解绑和从新绑定的时候，在input框中输入结束，点击input所在的td的时候，会接着触发mouseenter事件；可是当点击该input所在的td以外的td的时候，就会发生blur事件和mouseleave事件。
• 为了，在点击当前input所在的td的时候，只发生blur事件，须要在blur事件结束以后，删除mouseenter事件的绑定。这样，tr的mouseenter事件被删除了就不会触发了。
• 可是，在当前行blur以后，再进入其余的行依旧须要可以编辑，又因为编辑完一行以后，确定是会mouseleave该行的，所以，在tr的mouseleave事件中又将tr的mouseenter事件加回去。
• 须要注意一点，咱们在使用jq绑定事件的时候，重复的事件是不会被清除的，而是会累加，因此，在mouseleave中从新添加事件以前，须要将以前的先清除。在这里就是：在mousenter以后根本没有对input进行编辑就mouseleave了，此时在mouseleave中若不先清除原有的事件，那么tr上的mouseenter事件就会被添加两次。