弹出输入框,点击穿透的问题

最近项目遇到一个问题,弹框里面包含输入框,我们输入内容以后,点击确定按钮,此时弹框也会跟着消失,而这不是我们想要的效果,因为我们可能需要在判定用户是否输入正确才决定是否让弹框消失,如果用户输入错误,我们只是提示输入内容错误,用户会继续输入,如果此时我们弹框消失了,用户就需要再走之前的操作,可能需要先点击某个按钮,让弹框显示出来。这样肯定是不合常理的。

那首先我们需要知道这个问题是如何造成的,才可以解决这个问题,刚开始以为穿透的问题,是用户在点击确定按钮的时候,穿透到了下面的弹框,触发了弹框的点击事件,但是有一个奇怪的现象就是:如果输入框出来,用户点击确定按钮,后面的弹框是不会消失的,而一旦用户输入了内容,再次点击输入框的任何地方,都会导致后面的弹框消失,所以这个应该不是单单是点击穿透的问题。

经过调试和研究,发现其实这个是系统的原因,因为我们在输入内容的时候,输入框会出来,页面会产生滚动,页面元素的位置会发生变化,而且当前输入框的定位是在最上层,所以我们有可能点击到下面的元素,所以才导致了这个问题,那如何解决呢, 因为是系统的原因,所以我们只能用取巧的方式来解决,比如当输入框失去焦点以后,我们就让页面滚动一下,让页面恢复到之前的定位状态,这样就可以避免这个问题的发生,思路有了,处理起来也很简单,代码如下:使用的时候,直接粘贴复制即可。


你可能感兴趣的:(弹出输入框,点击穿透的问题)