5
z-index上层元素遮挡下层元素点击事件解决
source link: https://www.geekjc.com/post/5f12864a43118e1748929e60
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
关注本站公众号获取最新福利
z-index上层元素遮挡下层元素点击事件解决
时间: 07/25/2020作者: 一颗小草浏览量: 680
1. 问题描述
笔者是在些一个登录界面时遇到这个问题的，需求是点击登录按钮出现登录悬浮框，初始化时登录悬浮框是display:none的，但笔者发现登录框那一块区域的input框无法响应点击时间，也无法获得焦点。
一般鼠标放在input框上是会变成编辑的横杠，input框也会获得焦点。
2. 解决方案
对上层元素使用：
pointer-events: none;
这样点击事件就能穿透上层元素，
但若是你想让上层元素也能得到点击事件，又该怎么办呢？
只需要在你需要获得点击的上层元素子元素中加入：
pointer-events: auto;
关注下面的标签，发现更多相似的文章
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK