คำแนะนำเครื่องมือเบราว์เซอร์เริ่มต้นไม่แสดงเนื่องจากการ debounce RxJS

ฉันคิดว่าคุณสามารถลองทริกเกอร์เหตุการณ์ mousemove บนโค้ดโดยใช้วิธี Element.dispatchEvent() ได้ ฉันได้ลองทำอะไรบางอย่างเป็นตัวอย่างใน stackblitz demo (ใช่ มันเป็นเชิงมุม แต่ฉันไม่ได้ใช้คุณลักษณะเชิงมุมของ andy นอกเหนือจากการแยกข้อกังวล markup-javascript-css => อย่างอื่นเป็นเพียง javascript ล้วนๆ) โดยพื้นฐานแล้วสิ่งที่ฉันทำคือ:

<p title="house">
  Start editing to see some magic happen :)
</p>

// track the html elements that currently have a title modified
// this avoids additional unnecessary listeners on a single HTML element
private elementWithListenerAdded = new Set();

...

fromEvent(document, "mousemove")
  .pipe(
    debounceTime(20),
    tap(($event: MouseEvent) => {
      this.addTooltip($event);
    })
  )
  .subscribe();

...

addTooltip(evt: MouseEvent) {
  const $tag = evt.target;

  // I'm assuming that you don't want any tooltip on
  // header, HTML or body tags
  if (
    ($tag as any).tagName === "HEADER" ||
    ($tag as any).tagName === "HTML" ||
    ($tag as any).tagName === "BODY" ||
    this.elementWithListenerAdded.has($tag)
  ) {
    return;
  }

  const elementWithListenerAdded = this.elementWithListenerAdded;

  elementWithListenerAdded.add($tag);

  // remove the event listener when the mouse leave the element
  // and restore the original title
  const originalTitle = ($tag as any).getAttribute("title");
  function removeEventListener() {
    $tag.removeEventListener("mouseleave", this);
    elementWithListenerAdded.delete($tag);
    ($tag as any).setAttribute("title", originalTitle);
  }

  $tag.addEventListener("mouseleave", removeEventListener);

  ($tag as any).setAttribute("title", "just a test");

  ($tag as any).dispatchEvent(
    new MouseEvent("mousemove", {
      bubbles: true,
      cancelable: true,
      view: window
    })
  );
}