帶有窗口滾動事件的 Mouseenter 和 mouseleave 事件

Question

我想測量鼠標光標在特定區域（div 容器）中的時間。 請參閱下面的代碼。

到目前為止，離開和進入時間（懸停時間）僅在鼠標光標進入和離開相應容器（由於 mouseleave 和 mouseenter 事件）時測量，而不是在用戶使用鼠標滾輪或滾動窗口時測量。 我的目標是以一種方式更改代碼，即在滾動窗口時也測量懸停時間（例如，用戶使用鼠標滾輪）。

我已經嘗試使用選擇器“文檔”來實現 .scroll() 事件。

有沒有人已經遇到過同樣的問題並有解決問題的方法？

 var hover_events = {}; var enter_time; var leave_time; $(".element").on('mouseenter', function(d) { enter_time = Date.now(); hover_events[d.target.id] = { element_id: d.target.id, enter_time: enter_time, leave_time: undefined, }; }); $(".element").on('mouseleave', function(d) { leave_time = Date.now(); hover_events[d.target.id]["leave_time"] = leave_time; console.log(hover_events[d.target.id]) delete(hover_events[d.target.id]); });

 .element { margin: 100px; width: 100px; height: 100px; background-color: lightblue; } #scroll { width: 1000px; height: 1000px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="scroll"> <div class="element" id="test"> </div> </div>

Answer 1

我發現這個問題很有趣……並且花了很多時間在它上面。

這是我的想法：

• 使用mouseenter錄制time_enter 。
• 使用mouseleave計算元素的time_spent並清除time_enter 。
• 在mousemove ，記錄 x/y 鼠標位置。
• 在scroll所有元素時，獲取位置（相對於視口）將它們與記錄的鼠標位置進行比較以在其上觸發mouseenter或mouseleave 。

代碼筆

 console.clear(); var elements = {}; let mouse_pos = {}; // Save all element position relative to the viewport function positions() { $(".element").each(function () { let bounding_rect = this.getBoundingClientRect(); elements[this.id] = elements[this.id] || {}; elements[this.id].top = bounding_rect.top; elements[this.id].right = bounding_rect.right; elements[this.id].bottom = bounding_rect.bottom; elements[this.id].left = bounding_rect.left; elements[this.id].time_spent = elements[this.id].time_spent || 0; }); } // Run once on load positions(); let keys = Object.keys(elements); $(window).on("scroll", function () { positions(); // loop all elements keys.forEach(function (id) { let item = elements[id]; if ( mouse_pos.x > item.left && mouse_pos.x < item.right && mouse_pos.y > item.top && mouse_pos.y < item.bottom ) { console.log("Hovering", id); $(`#${id}`).trigger("mouseenter"); } else { $(`#${id}`).trigger("mouseleave"); } }); }); $(document).on("mousemove", function (e) { mouse_pos.x = e.pageX; mouse_pos.y = e.pageY; //console.log(mouse_pos) }); $(".element").on("mouseenter", function (e) { elements[e.target.id].time_enter = Date.now(); //console.log(elements); $(`#${e.target.id}`).addClass("hovered"); }); $(".element").on("mouseleave", function (e) { if (elements[e.target.id].time_enter) { elements[e.target.id].time_spent += Date.now() - elements[e.target.id].time_enter; delete elements[e.target.id].time_enter; //console.log(elements); $(`#${e.target.id}`) .text((elements[e.target.id].time_spent / 1000).toFixed(2) + " sec.") .removeClass("hovered"); } });

 body { height: 1000px; } .row { display: flex; justify-content: space-between; margin-top: 100px; } .element { width: 100px; height: 100px; background-color: lightblue; display: flex; justify-content: center; align-items: center; } .hovered { border: 1px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="element" id="el_1"></div> <div class="element" id="el_2"></div> <div class="element" id="el_3"></div> <div class="element" id="el_4"></div> </div> <div class="row"> <div class="element" id="el_5"></div> <div class="element" id="el_6"></div> <div class="element" id="el_7"></div> <div class="element" id="el_8"></div> </div>