当用户离开页面时，如何使用 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();

   }

}