关于鼠标挪动太快致使moseleave事宜不触发的题目

形貌:
我做的是一个table的编辑功用,当移入某行的时刻展现编辑状况,在移出某行的时刻显现的是原始状况,此时碰到一种状况,就是
当mousenter事宜触发以后,因为鼠标挪动得太快,同一个tr上绑定的mouseleave事宜压根儿就没有实行。

假如此时想要在mouseenter中做撙节,那末这么多的tr,该如何辨别呢?

我这里采纳的体式格局是,在mouseenter中举行阻拦。
tr有多个,当触发了某个tr的mousenter事宜后,立时移入到下一个tr,然则却因为鼠标挪动太快没有触发上一个tr的mouseleave事宜,此时上一个
tr在mouseenter中已被修正成了编辑状况,没有触发mouseleave事宜,该tr的状况就不能恢复到非编辑状况。
此时如何将mouseleave事宜没有被实时实行引发的tr坚持编辑状况这个副作用消灭呢?

要领: 在给tr绑定的mouseenter事宜里做一层阻拦。在处置惩罚当前tr的状况转变之前,先看一下其他的tr中是不是有tr还没有退出编辑状况的,假如有,就将其重置成非编辑状况。
处置惩罚完当前tr的兄弟节点后,再处置惩罚当前tr本身的编辑和非编辑状况切换。

$("#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 = $("<div class=\"money-budget-validate\"><input type='text' data-original=" + txt + " class='edit-input-box'><span></span></div>");
        put.find('.edit-input-box').val(txt);
        currentEditTdItem.addClass("edit-btn-display")
        currentEditTdItem.html(put);
        console.log('mouseenter', currentEditTdItem.html())
    });
});

题目:
为何鼠标挪动过快的时刻,mouseleave事宜偶然不会被触发呢?

看他人的诠释以下:
顺序实行时有肯定时候的,假如过快,能够两个事宜就争执了。

    原文作者:qinqinlv
    原文地址: https://segmentfault.com/a/1190000018213277
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞