關(guān)于鼠標(biāo)移動(dòng)太快導(dǎo)致moseleave事件不觸發(fā)的問題

CompileYouth 發(fā)布于2019-08-23 15:19 / 1685人閱讀

摘要：有多個(gè)，當(dāng)觸發(fā)了某個(gè)的事件后，馬上移入到下一個(gè)但是卻由于鼠標(biāo)移動(dòng)太快沒有觸發(fā)上一個(gè)的事件，此時(shí)上一個(gè)在中已經(jīng)被修改成了編輯狀態(tài)，沒有觸發(fā)事件，該的狀態(tài)就不能恢復(fù)到非編輯狀態(tài)。

描述：
我做的是一個(gè)table的編輯功能，當(dāng)移入某行的時(shí)候展示編輯狀態(tài)，在移出某行的時(shí)候顯示的是原始狀態(tài)，此時(shí)遇到一種情況，就是
當(dāng)mousenter事件觸發(fā)之后，由于鼠標(biāo)移動(dòng)得太快，同一個(gè)tr上綁定的mouseleave事件壓根兒就沒有執(zhí)行。

如果此時(shí)想要在mouseenter中做節(jié)流，那么這么多的tr，該怎么樣區(qū)分呢？

我這里采用的方式是，在mouseenter中進(jìn)行攔截。
tr有多個(gè)，當(dāng)觸發(fā)了某個(gè)tr的mousenter事件后，馬上移入到下一個(gè)tr,但是卻由于鼠標(biāo)移動(dòng)太快沒有觸發(fā)上一個(gè)tr的mouseleave事件，此時(shí)上一個(gè)
tr在mouseenter中已經(jīng)被修改成了編輯狀態(tài)，沒有觸發(fā)mouseleave事件，該tr的狀態(tài)就不能恢復(fù)到非編輯狀態(tài)。
此時(shí)怎樣將mouseleave事件沒有被及時(shí)執(zhí)行引起的tr保持編輯狀態(tài)這個(gè)副作用清除呢？

方法：在給tr綁定的mouseenter事件里做一層攔截。在處理當(dāng)前tr的狀態(tài)改變之前，先看一下其他的tr中是否有tr還沒有退出編輯狀態(tài)的，如果有，就將其重置成非編輯狀態(tài)。
處理完當(dāng)前tr的兄弟節(jié)點(diǎn)后，再處理當(dāng)前tr自己的編輯和非編輯狀態(tài)切換。

$("#table_id_example tbody").on("mouseenter", "tr", function (e) {
    e.stopPropagation();
    var beingEditOrNot = $(this).hasClass("being-edit-row");

    var otherRowsPrepareToEditButMissMouseleave = $(this).siblings();
    var otherTdsPrepareToEditButMissMouseleave = otherRowsPrepareToEditButMissMouseleave.find(".edit-input-box").parents("td");
    $.each(otherTdsPrepareToEditButMissMouseleave , function(index , item) {
        var txt = $(item).find(".edit-input-box").attr("data-original");
        txt = txt ? txt : "";
        $(item).removeClass("edit-btn-display");
        $(item).html(txt);
        tableDom.cell($(item)).data(txt);
    });

    var tds = $(this).children("td");
    $.each(tds, function (i, val) {
        var currentEditTdItem = $(val);
        if (i !== 3) {
            return;
        }
        // if there is something validate wrong,stay there width no value exchange
        var validateSpanDom = currentEditTdItem.find("span");
        var value = validateSpanDom ? validateSpanDom.text() : "";
        var validateTxt = validateInputBox(value);
        if (validateTxt) return;
        if (beingEditOrNot) return;

        if (currentEditTdItem.find(".edit-input-box").length > 0) return;

        var txt = currentEditTdItem.text();
        txt = txt.replace("$", "");
        txt = txt.replace(/,/g, "");
        var put = $("");
        put.find(".edit-input-box").val(txt);
        currentEditTdItem.addClass("edit-btn-display")
        currentEditTdItem.html(put);
        console.log("mouseenter", currentEditTdItem.html())
    });
});

問題：
為什么鼠標(biāo)移動(dòng)過(guò)快的時(shí)候，mouseleave事件有時(shí)不會(huì)被觸發(fā)呢？

看別人的解釋如下：
程序執(zhí)行時(shí)有一定時(shí)間的，如果過(guò)快，可能兩個(gè)事件就沖突了。