最近项目遇到一个问题，弹框里面包含输入框，我们输入内容以后，点击确定按钮，此时弹框也会跟着消失，而这不是我们想要的效果，因为我们可能需要在判定用户是否输入正确才决定是否让弹框消失，如果用户输入错误，我们只是提示输入内容错误，用户会继续输入，如果此时我们弹框消失了，用户就需要再走之前的操作，可能需要先点击某个按钮，让弹框显示出来。这样肯定是不合常理的。
那首先我们需要知道这个问题是如何造成的，才可以解决这个问题，刚开始以为穿透的问题，是用户在点击确定按钮的时候，穿透到了下面的弹框，触发了弹框的点击事件，但是有一个奇怪的现象就是：如果输入框出来，用户点击确定按钮，后面的弹框是不会消失的，而一旦用户输入了内容，再次点击输入框的任何地方，都会导致后面的弹框消失，所以这个应该不是单单是点击穿透的问题。
经过调试和研究，发现其实这个是系统的原因，因为我们在输入内容的时候，输入框会出来，页面会产生滚动，页面元素的位置会发生变化，而且当前输入框的定位是在最上层，所以我们有可能点击到下面的元素，所以才导致了这个问题，那如何解决呢， 因为是系统的原因，所以我们只能用取巧的方式来解决，比如当输入框失去焦点以后，我们就让页面滚动一下，让页面恢复到之前的定位状态，这样就可以避免这个问题的发生，思路有了，处理起来也很简单，代码如下：使用的时候，直接粘贴复制即可。
<script>
//按钮关闭
document.addEventListener("focusout", function (event) {
var nodeName = event.target.nodeName;
nodeName = nodeName.toLowerCase();
if (nodeName == "input") {
window.scrollBy(0, 0)
}
});
</script>