隐藏覆盖层时，Javascript 防止底层点击

Question

我正在制作一个在桌面和移动设备上运行的应用程序，它有一个 div，当用户单击或点击 div 外部时，它会隐藏。该 div 位于其他元素之上，我遇到的问题是，当用户点击它隐藏的 div 外部时，它还会在其下方的元素上执行单击事件。当调用 mousedown 事件时，此功能在桌面上运行良好。我添加的代码是:

$(document).on( "mousedown touchstart", function(e){
    if (isSearchOpen) {
        if (!$(searchContainer).is(e.target) && $(searchContainer).has(e.target).length === 0) {
            $('input[name=q]','form[name=searchFormMobile]').val('');
            $('input[name=q]','form[name=searchForm]').val('');
            $(searchOverlay).hide();
            isSearchOpen = false;
        }
    }
});

我尝试在第二个 内调用 e.preventDefault()、e.stopPropagation() 和 return false; if-statement 并且这些都不起作用。此弹出窗口可以出现在多个“页面”上，因此我希望避免 try catch 任何可以单击的可能元素，并尽可能以这种方式处理此问题。

任何帮助将不胜感激!

Answer 1

您可以尝试向您的 div 添加模糊事件。每当用户单击或点击 div 外部时，就会触发一个事件。

https://developer.mozilla.org/en-US/docs/Web/Events/blur