JQuery Mouseleave 在錯誤的元素上觸發

Question

我已經使用 Jquery mouseleave 事件為我的網站實現了一個退出彈出窗口，如下所示：

 $(document).ready(function ($) { $(document).mouseleave(function () { var modal = $(".bd-exit-modal-lg"); var modalShown = $(modal).attr("data-modal-shown") if (modalShown == "false") { $(modal).modal('show').fadeIn(); $(modal).attr("data-modal-shown", "true"); } }); });

這一切都很好，除非當我點擊位於文檔頁腳的一些表單字段時，事件正在觸發導致彈出窗口顯示。

我無法弄清楚為什么會發生這種情況，因為退出模式的選擇器在文檔上而不是在輸入上

有什么想法嗎？

Answer 1

嘗試在整個HTML周圍放置一個上層div ，以便您的mouseleave函數具有更具體的目標：

<div id="entire-html-doc">
    your other HTML here
</div>

<script>
    $(document).ready(function ($) {
        $('#entire-html-doc').mouseleave(function () {
            var modal = $(".bd-exit-modal-lg");
            var modalShown = $(modal).attr("data-modal-shown")

            if (modalShown == "false") {
                $(modal).modal('show').fadeIn();
                $(modal).attr("data-modal-shown", "true");
            }
        });
    });
</script>