关于鼠标移动太快导致moseleave事件不触发的问题

朱雀 2022-03-07 00:10 394阅读 0赞

描述：  
我做的是一个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事件有时不会被触发呢？

看别人的解释如下：  
程序执行时有一定时间的，如果过快，可能两个事件就冲突了。