描述:
我做的是一个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 = $(""); put.find('.edit-input-box').val(txt); currentEditTdItem.addClass("edit-btn-display") currentEditTdItem.html(put); console.log('mouseenter', currentEditTdItem.html()) });});
问题:
为什么鼠标移动过快的时候,mouseleave事件有时不会被触发呢?看别人的解释如下:
程序执行时有一定时间的,如果过快,可能两个事件就冲突了。