關于鼠標移動太快導致moseleave事件不觸發(fā)的問題

CompileYouth 發(fā)布于2019-08-23 15:19 / 1671人閱讀

摘要：有多個，當觸發(fā)了某個的事件后，馬上移入到下一個但是卻由于鼠標移動太快沒有觸發(fā)上一個的事件，此時上一個在中已經(jīng)被修改成了編輯狀態(tài)，沒有觸發(fā)事件，該的狀態(tài)就不能恢復到非編輯狀態(tài)。

描述：
我做的是一個table的編輯功能，當移入某行的時候展示編輯狀態(tài)，在移出某行的時候顯示的是原始狀態(tài)，此時遇到一種情況，就是
當mousenter事件觸發(fā)之后，由于鼠標移動得太快，同一個tr上綁定的mouseleave事件壓根兒就沒有執(zhí)行。

如果此時想要在mouseenter中做節(jié)流，那么這么多的tr，該怎么樣區(qū)分呢？

我這里采用的方式是，在mouseenter中進行攔截。
tr有多個，當觸發(fā)了某個tr的mousenter事件后，馬上移入到下一個tr,但是卻由于鼠標移動太快沒有觸發(fā)上一個tr的mouseleave事件，此時上一個
tr在mouseenter中已經(jīng)被修改成了編輯狀態(tài)，沒有觸發(fā)mouseleave事件，該tr的狀態(tài)就不能恢復到非編輯狀態(tài)。
此時怎樣將mouseleave事件沒有被及時執(zhí)行引起的tr保持編輯狀態(tài)這個副作用清除呢？

方法：在給tr綁定的mouseenter事件里做一層攔截。在處理當前tr的狀態(tài)改變之前，先看一下其他的tr中是否有tr還沒有退出編輯狀態(tài)的，如果有，就將其重置成非編輯狀態(tài)。
處理完當前tr的兄弟節(jié)點后，再處理當前tr自己的編輯和非編輯狀態(tài)切換。

$("#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事件有時不會被觸發(fā)呢？

看別人的解釋如下：
程序執(zhí)行時有一定時間的，如果過快，可能兩個事件就沖突了。

GPU云服務器云服務器不觸發(fā)鼠標按下事件 WebRTC源碼offer不觸發(fā)事件 html的鼠標事件關于javascript的問題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/101872.html

原生JS快速拖動元素失效問題

摘要：快速拖動元素失效問題原因及解決方法情景再現(xiàn)晚上在寫畢設時，碰到個快速拖動元素，元素會跟不上的問題。延遲之后，元素移動的速度趕不上鼠標移動的速度，可能造成鼠標移出元素的狀態(tài)，從而觸發(fā)了事件，從而造成了被拖動元素停止移動。快速拖動元素失效問題原因及解決方法情景再現(xiàn) 晚上在寫畢設時，碰到個快速拖動元素，元素會跟不上的問題。具體情形如下：代碼及演示結(jié)果出現(xiàn)的問題showImg(htt...

Hydrogen 2019-08-22 18:07 評論0 收藏0
移動端滾動研究

摘要：還會有一個性能上的問題就是當頁面的列表過長，元素過多時，在模擬滾動，下拉刷新這段時間內(nèi)，頁面也會有卡頓現(xiàn)象，這里采取了一個優(yōu)化策略即列表較長時數(shù)量較多時，在觸發(fā)下拉刷新的時機時將頁面視窗之外的元素隱藏或者存放在里面。移動web滾動問題在移動端如果使用局部滾動，意思就是我們的滾動在一個固定寬高的div內(nèi)觸發(fā)，將該div設置成overflow:scroll/auto;來形成div內(nèi)部的...

ghnor 2019-08-23 14:32 評論0 收藏0
學習使用Chrome性能分析工具（譯）

摘要：原文地址開始在本教程中，你將學會如何使用性能分析工具分析頁面上的性能瓶頸。其中包含了捕獲性能指標相關的設置。參考分析優(yōu)化版的性能使用剛剛學習的工作流和工具，單擊演示中的優(yōu)化以啟用優(yōu)化的代碼，進行另一次性能記錄，然后分析結(jié)果。原文地址：https://developers.google.com... 開始在本教程中，你將學會如何使用性能分析工具分析頁面上的性能瓶頸。在隱身模式下打...

waruqi 2019-08-26 10:32 評論0 收藏0
原生js練習題---第二課（下）

摘要：最后，我們只要在事件處理程序中獲得這個布爾值傳給這幾個函數(shù)就可以了，其中，全選框反選鏈接可以從全選框的屬性獲得這個值，而全體的復選框要獲得就得靠遍歷了。 0x1播放列表收縮展開實現(xiàn)效果值得注意的一個地方是那個箭頭，我這里只是用了簡單的字符串替換，而原題用了背景圖片移動來實現(xiàn)切換箭頭，但是似乎那樣做會導致整個容器的左右偏移、效果不是很好。 0x2鼠標移過顯示車標實現(xiàn)效果這題看起來...

Little_XM 2019-08-19 17:51 評論0 收藏0
瀏覽器常用事件解析

摘要：之前寫過一篇瀏覽器事件的相關操作和事件運行的原理瀏覽器事件解析。注意，頁面從瀏覽器緩存加載，并不會觸發(fā)事件。事件有一個屬性，返回一個布爾值。此外，不支持事件，可以使用事件代替。之前寫過一篇瀏覽器事件的相關操作和事件運行的原理——JavaScript瀏覽器事件解析。這一篇主要寫一些常用的事件及一些可能的坑。表單事件鍵盤事件當 , 的值發(fā)生變化時觸發(fā)。此外，打開 contente...

zhoutk 2019-08-02 16:04 評論0 收藏0