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

CompileYouth 发布于2019-08-23 15:19 / 1328人阅读

摘要：有多个，当触发了某个的事件后，马上移入到下一个但是却由于鼠标移动太快没有触发上一个的事件，此时上一个在中已经被修改成了编辑状态，没有触发事件，该的状态就不能恢复到非编辑状态。

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

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

云服务器服务器托管不触发鼠标按下事件 WebRTC源码offer不触发事件 html的鼠标事件关于javascript的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101872.html

原生JS快速拖动元素失效问题

摘要：快速拖动元素失效问题原因及解决方法情景再现晚上在写毕设时，碰到个快速拖动元素，元素会跟不上的问题。延迟之后，元素移动的速度赶不上鼠标移动的速度，可能造成鼠标移出元素的状态，从而触发了事件，从而造成了被拖动元素停止移动。快速拖动元素失效问题原因及解决方法情景再现晚上在写毕设时，碰到个快速拖动元素，元素会跟不上的问题。具体情形如下：代码及演示结果出现的问题showImg(htt...

Hydrogen 2019-08-22 18:07 评论0 收藏0
移动端滚动研究

摘要：还会有一个性能上的问题就是当页面的列表过长，元素过多时，在模拟滚动，下拉刷新这段时间内，页面也会有卡顿现象，这里采取了一个优化策略即列表较长时数量较多时，在触发下拉刷新的时机时将页面视窗之外的元素隐藏或者存放在里面。移动web滚动问题在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的...

ghnor 2019-08-23 14:32 评论0 收藏0
学习使用Chrome性能分析工具（译）

摘要：原文地址开始在本教程中，你将学会如何使用性能分析工具分析页面上的性能瓶颈。其中包含了捕获性能指标相关的设置。参考分析优化版的性能使用刚刚学习的工作流和工具，单击演示中的优化以启用优化的代码，进行另一次性能记录，然后分析结果。原文地址：https://developers.google.com... 开始在本教程中，你将学会如何使用性能分析工具分析页面上的性能瓶颈。在隐身模式下打...

waruqi 2019-08-26 10:32 评论0 收藏0
原生js练习题---第二课（下）

摘要：最后，我们只要在事件处理程序中获得这个布尔值传给这几个函数就可以了，其中，全选框反选链接可以从全选框的属性获得这个值，而全体的复选框要获得就得靠遍历了。 0x1播放列表收缩展开实现效果值得注意的一个地方是那个箭头，我这里只是用了简单的字符串替换，而原题用了背景图片移动来实现切换箭头，但是似乎那样做会导致整个容器的左右偏移、效果不是很好。 0x2鼠标移过显示车标实现效果这题看起来...

Little_XM 2019-08-19 17:51 评论0 收藏0
浏览器常用事件解析

摘要：之前写过一篇浏览器事件的相关操作和事件运行的原理浏览器事件解析。注意，页面从浏览器缓存加载，并不会触发事件。事件有一个属性，返回一个布尔值。此外，不支持事件，可以使用事件代替。之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件及一些可能的坑。表单事件键盘事件当 , 的值发生变化时触发。此外，打开 contente...

zhoutk 2019-08-02 16:04 评论0 收藏0