javascript - jQuery Mouseleave在错误的元素上触发

我已经使用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");
        }
    });
});

一切正常，除非我单击位于文档页脚中的某些表单域，否则会触发该事件，从而导致弹出窗口显示。

我不知道为什么会这样，因为退出模式的选择器在文档中而不是输入中

有想法吗？

最佳答案

尝试在整个div周围放置一个上级HTML，以便您的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>

关于javascript - jQuery Mouseleave在错误的元素上触发，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46981426/