博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于鼠标移动太快导致moseleave事件不触发的问题
阅读量:5789 次
发布时间:2019-06-18

本文共 2145 字,大约阅读时间需要 7 分钟。

描述:

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

看别人的解释如下:

程序执行时有一定时间的,如果过快,可能两个事件就冲突了。

转载地址:http://zrmyx.baihongyu.com/

你可能感兴趣的文章
vim
查看>>
MVVM计算器(下)
查看>>
C++中指针和引用的区别
查看>>
簡單分稀 iptables 記錄 udp 微軟 138 端口
查看>>
Java重写equals方法和hashCode方法
查看>>
Spark API编程动手实战-07-join操作深入实战
查看>>
H3C-路由策略
查看>>
centos 修改字符界面分辨率
查看>>
LNMP之Mysql主从复制(四)
查看>>
阅读Spring源代码(1)
查看>>
nagios一键安装脚本,nagios监控被监控主机上的应用服务mysql数据库
查看>>
grep 命令
查看>>
JS二维数组的声明和使用
查看>>
v$archive_gap dg dataguard 断档处理 scn恢复
查看>>
问责IT风险管理:CIO需关注两个重点
查看>>
Winform打包发布图解
查看>>
PDF文件怎么编辑,超简单的方法
查看>>
EasyUI基础入门之Easyloader(载入器)
查看>>
Uva 839 Not so Mobile
查看>>
30款超酷的HTTP 404页面未找到错误设计
查看>>