当用户离开页面时，如何使用 Aplinejs 触发模式？

Question

我有一个 Bootstrap 模式，当用户离开页面时需要触发它。 在纯 JS 中，解决方案是监听 mouseleave 事件，检查用户之前是否手动关闭了模态，如果没有，则显示模态。

document.addEventListener("mouseleave", function (e) {
        if (e.clientY < 0) {
          if (localStorage.getItem('newsLetterSignUp') === null) {
            $('someModal').modal();
          }
        }
      }, false);

我正在尝试使用 Apline.js 实现相同的行为。

第一种方法是在模态本身上设置事件处理程序：（我有一个自定义模型 CSS 类 .newsletter-modal 而不是 Bootstrap 的 .modal 因为我想用 Alpine 处理可见性）

<div x-data="newsletter()">
    <div
      x-show="showModal"
      @mouseleave.document="revealModal"
      class="newsletter-modal show fade"
      id="mailingListModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="mailingListModal"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" @click.away="showModal = false"> [modal content] </div>
      </div>
  </div>

 <--- JS code to handle the modal actions --->
    <script>
    window.newsletter = function() {
      return {
        showModal: true,
        revealModal(e) {
          alert('leave');
          if (e.clientY < 0 && localStorage.getItem('newsLetterSignUp') === null) {
            this.showModal = true;
          }
        },
        closeNewsletterModal() {
          this.showModal = false;
          localStorage.setItem('newsLetterSignUp', JSON.stringify(new Date()));
        }
      }
    }
  </script>
        

我的想法是将 .document 属性添加到 @mouseleave 事件以将其绑定到文档，但这没有效果。

另一种方法是在 上设置@mouseleave 事件，分派一个事件并在模态上监听该事件。 但这也没有导致在 mouseleave 上触发事件。

Answer 1

结果证明问题不在事件处理程序或 Alpine 中，而是在 Firefox 中。 在 Firefox 中，当用户将鼠标移离窗口时，不会触发 mouseleave 事件。 在这个问题中解释了这种行为

因此，Firefox 的解决方案是添加一个额外的事件侦听器来跟踪鼠标移动。 并在 e.clientY < 10 时立即触发

// HTML
<div x-data="newsletter()" @mouseleave.window="revealModal" @mousemove.document="isUserLeaving"> ... </div>
// JS
isUserLeaving(e) {
   if (e.clientY < 10) {
       this.revealModal();
   }
}