最近項目遇到一個問題，彈框裏面包含輸入框，我們輸入內容以後，點擊確定按鈕，此時彈框也會跟着消失，而這不是我們想要的效果，因爲我們可能需要在判定用戶是否輸入正確才決定是否讓彈框消失，如果用戶輸入錯誤，我們只是提示輸入內容錯誤，用戶會繼續輸入，如果此時我們彈框消失了，用戶就需要再走之前的操作，可能需要先點擊某個按鈕，讓彈框顯示出來。這樣肯定是不合常理的。
那首先我們需要知道這個問題是如何造成的，纔可以解決這個問題，剛開始以爲穿透的問題，是用戶在點擊確定按鈕的時候，穿透到了下面的彈框，觸發了彈框的點擊事件，但是有一個奇怪的現象就是：如果輸入框出來，用戶點擊確定按鈕，後面的彈框是不會消失的，而一旦用戶輸入了內容，再次點擊輸入框的任何地方，都會導致後面的彈框消失，所以這個應該不是單單是點擊穿透的問題。
經過調試和研究，發現其實這個是系統的原因，因爲我們在輸入內容的時候，輸入框會出來，頁面會產生滾動，頁面元素的位置會發生變化，而且當前輸入框的定位是在最上層，所以我們有可能點擊到下面的元素，所以才導致了這個問題，那如何解決呢， 因爲是系統的原因，所以我們只能用取巧的方式來解決，比如當輸入框失去焦點以後，我們就讓頁面滾動一下，讓頁面恢復到之前的定位狀態，這樣就可以避免這個問題的發生，思路有了，處理起來也很簡單，代碼如下：使用的時候，直接粘貼複製即可。
<script>
//按鈕關閉
document.addEventListener("focusout", function (event) {
var nodeName = event.target.nodeName;
nodeName = nodeName.toLowerCase();
if (nodeName == "input") {
window.scrollBy(0, 0)
}
});
</script>