共计 1908 个字符，预计需要花费 5 分钟才能阅读完成。
描述：我做的是一个 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 事件有时不会被触发呢？
看别人的解释如下：程序执行时有一定时间的，如果过快，可能两个事件就冲突了。
