Throttle mouse event

Author: kishikawakatsumi

Package.resolved

@@ -1,7 +1,7 @@
 "use strict";
 
-import { Popover } from "./popover.js";
 import "../css/lookup.css";
+import { Popover } from "./popover.js";
 
 export class LoopupView {
   set error(error) {
@@ -29,7 +29,6 @@ export class LoopupView {
       .find("span")
       .each(function () {
         $(this).mouseover(function (event) {
-          event.preventDefault();
           event.stopPropagation();
 
           const contents = [];
@@ -91,7 +90,6 @@ export class LoopupView {
         });
 
         $(this).mouseout(function (event) {
-          event.preventDefault();
           event.stopPropagation();
 
           let element = event.target;

Public/js/lookup_view.js

@@ -1,6 +1,7 @@
 "use strict";
 
 import "../css/popover.css";
+import { throttle } from "./throttle.js";
 
 export class Popover {
   set maxWidth(value) {
@@ -28,16 +29,29 @@ export class Popover {
     this.popover.appendChild(this.popoverContent);
     document.body.appendChild(this.popover);
 
-    this.popover.addEventListener("mouseenter", (event) => {
-      event.preventDefault();
-      event.stopPropagation();
+    const onmouseover = throttle((event) => {
       this.onmouseover(event);
     });
-    this.popover.addEventListener("mouseleave", (event) => {
-      event.preventDefault();
-      event.stopPropagation();
+    const onmouseout = throttle((event) => {
       this.onmouseout(event);
     });
+
+    this.popover.addEventListener(
+      "mouseenter",
+      (event) => {
+        event.stopPropagation();
+        onmouseover(event);
+      },
+      { capture: false, once: false, passive: false }
+    );
+    this.popover.addEventListener(
+      "mouseleave",
+      (event) => {
+        event.stopPropagation();
+        onmouseout(event);
+      },
+      { capture: false, once: false, passive: false }
+    );
   }
 
   show(target, options = {}) {

Public/js/popover.js

@@ -5,6 +5,8 @@ import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";
 
 import "../css/table.css";
 
+import { throttle } from "./throttle.js";
+
 export class StatisticsView {
   set error(error) {
     this.container.innerHTML = `<div class="alert alert-danger m-3" role="alert">${error}</div>`;
@@ -36,18 +38,29 @@ export class StatisticsView {
       tr.innerHTML = `<td style="font-family: Menlo, Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', monospace;">${row.text}</td><td><div>${row.ranges.length}</div></td>`;
       body.appendChild(tr);
 
-      tr.addEventListener("mouseover", (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        this.onmouseover(event, tr, row.ranges);
+      const onmouseover = throttle((event, element, data) => {
+        this.onmouseover(event, element, data);
       });
-      tr.addEventListener("mouseout", (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        this.onmouseout(event, tr);
+      const onmouseout = throttle((event, element, data) => {
+        this.onmouseout(event, element, data);
       });
+
+      tr.addEventListener(
+        "mouseover",
+        (event) => {
+          event.stopPropagation();
+          onmouseover(event, tr, row.ranges);
+        },
+        { capture: false, once: false, passive: false }
+      );
+      tr.addEventListener(
+        "mouseout",
+        (event) => {
+          event.stopPropagation();
+          onmouseout(event, tr);
+        },
+        { capture: false, once: false, passive: false }
+      );
     }
 
     if (this.dataTable) {

Public/js/statistics_view.js

@@ -0,0 +1,17 @@
+"use strict";
+
+export function throttle(fn) {
+  let raf;
+
+  return (...args) => {
+    if (raf) {
+      cancelAnimationFrame(raf);
+      return;
+    }
+
+    raf = requestAnimationFrame(() => {
+      fn(...args);
+      raf = undefined;
+    });
+  };
+}

Public/js/throttle.js

@@ -1,6 +1,7 @@
 "use strict";
 
 import "../css/tree_view.css";
+import { throttle } from "./throttle.js";
 
 const downCaret = makeDownCaret();
 const rightCaret = makeRightCaret();
@@ -82,21 +83,34 @@ export class TreeView {
       li.appendChild(element);
     }
 
-    li.addEventListener("mouseover", (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-
-      li.classList.add("hover");
-      this.onmouseover(event, element, node);
+    const onmouseover = throttle((event, element, data) => {
+      this.onmouseover(event, element, data);
     });
-    li.addEventListener("mouseout", (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-
-      li.classList.remove("hover");
-      this.onmouseout(event, element, node);
+    const onmouseout = throttle((event, element, data) => {
+      this.onmouseout(event, element, data);
     });
 
+    li.addEventListener(
+      "mouseover",
+      (event) => {
+        event.stopPropagation();
+
+        li.classList.add("hover");
+        onmouseover(event, element, node);
+      },
+      { capture: false, once: false, passive: false }
+    );
+    li.addEventListener(
+      "mouseout",
+      (event) => {
+        event.stopPropagation();
+
+        li.classList.remove("hover");
+        onmouseout(event, element, node);
+      },
+      { capture: false, once: false, passive: false }
+    );
+
     ul.appendChild(li);
     return ul;
   }