当用户离开页面时，如何使用 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>// JSisUserLeaving(e) {   if (e.clientY < 10) {       this.revealModal();   }}