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

Question

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

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

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

第一种方法是在模式本身上设置事件处理程序：（我有一个自定义模型 CSS class .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 中，当用户将鼠标移离 window 时不会触发 mouseleave 事件。此 question

中解释了该行为

因此 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();
   }
}

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

How do I trigger a modal with Aplinejs when a user navigates away from the page?

javascript

bootstrap-4

alpine.js