亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

當用戶離開頁面時,如何使用 Aplinejs 觸發模式?

當用戶離開頁面時,如何使用 Aplinejs 觸發模式?

富國滬深 2023-04-14 15:03:32
我有一個 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 上被觸發。
查看完整描述

1 回答

?
慕沐林林

TA貢獻2016條經驗 獲得超9個贊

結果發現問題不在事件處理程序或 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();

? ?}

}


查看完整回答
反對 回復 2023-04-14
  • 1 回答
  • 0 關注
  • 111 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號