一、问题描述

笔者是在些一个登录界面时遇到这个问题的,需求是点击登录按钮出现登录悬浮框,初始化时登录悬浮框是display:none的,但笔者发现登录框那一块区域的input框无法响应点击时间,也无法获得焦点。

一般鼠标放在input框上是会变成编辑的横杠,input框也会获得焦点。

二、解决方案

对上层元素使用:

pointer-events: none;

这样点击事件就能穿透上层元素,

但若是你想让上层元素也能得到点击事件,又该怎么办呢?

只需要在你需要获得点击的上层元素子元素中加入:

pointer-events: auto;

即可!

如何透过上层div点击下层的元素解决方法的更多相关文章

  1. 使用PullToRefreshListView时遇到Item点击事件失效问题 解决方法

    最近在自己的项目中使用到了以下开源项目: https://github.com/nanchen2251/pullToRefreshDemo 相关介绍博客如下: http://www.cnblogs.c ...

  2. JavaSwing输入对话框,点击取消抛出异常的解决方法

    在做产品管理系统的时候,遇到一个问题: 在得到一个输入框对话框的时候 String textPrice = JOptionPane.showInputDialog("请输入要调整的价格增(减 ...

  3. ASP.NET Menu控件点击区域太小解决方法

    ASP.NET自带的Menu控件点击区域比较小,基本就是文本范围和图片范围,在区域外虽然选择的项有颜色变化,但是这个时候点击是没有用的,体验不是很好 检查前台生成的HTML,是用td嵌套a标签,a标签 ...

  4. jquery.uploadify上传图片,点击保存按钮无法使用解决方法

    用Chrome浏览器上传商品图片时,保存按钮无法点击,如下图 原因:Flash插件状态为禁止 或 询问(默认) 解决方法:将Flash插件状态改为允许,如下图

  5. ios 透过上层视图点击相应下方视图的点击事件

    - (UIView*)hitTest:(CGPoint)point withEvent:(UIEvent *)event{ UIView *hitView = [super hitTest:point ...

  6. div+css的兼容性问题和解决方法

    1. 默认的内外边距不同 问题: 各个浏览器默认的内外边距不同 解决: *{margin:0;padding:0;}   2. 水平居中的问题 问题: 设置 text-align: center    ...

  7. Win7下IE11点击无反应的解决方法

    平台:win7 sp1 32bit 问题:点击Internet Explorer在开始菜单.快捷栏的图标和安装目录下的程序均没有反应,鼠标在变成漏斗后恢复原状再无反应.但搜狗浏览器和360浏览器下使用 ...

  8. IE8下使用webuploader点击无反应的解决方法。

    在IE8开头添加如下代码. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 即可解决,亲 ...

  9. Android ListView的item点击无响应的解决方法

    假设listitem里面包含button或者checkbox等控件,默认情况下listitem会失去焦点,导致无法响应item的事件,最经常使用的解决的方法 是在listitem的布局文件里设置des ...

随机推荐

  1. 编写高质量代码改善C#程序的157个建议——建议20:使用泛型集合代替非泛型集合

    建议20:使用泛型集合代替非泛型集合 在建议1中我们知道,如果要让代码高效运行,应该尽量避免装箱和拆箱,以及尽量减少转型.很遗憾,在微软提供给我们的第一代集合类型中没有做到这一点,下面我们看Array ...

  2. Slf4j MDC 使用和 基于 Logback 的实现分析

    前言 如今,在 Java 开发中,日志的打印输出是必不可少的, 关于  有了日志之后,我们就可以追踪各种线上问题.但是,在分布式系统中,各种无关日志穿行其中,导致我们可能无法直接定位整个操作流程.因此 ...

  3. ArcGIS 工作经历【IFeatureBuffer】【CAD转SHP】

    由于工作需要,需要基于ArcGIS进行二次开发,软件的开发过程当中有一个非常重要的功能,就是需要把CAD的数据转换为shp文件保存,方便后面的使用编辑,存储. 先说一下功能的前提,需要将CAD转换为s ...

  4. JavaScript中事件冒泡之实例理解

    此#btnComfirmChooseCompany是Bootstrap模态弹层上的按钮,但点击后,点击事件被Bootstrap外层监听到了, 效果就是模态弹出层被关闭了,所以,我不想这个点击事件被&q ...

  5. Vue 自定义header

    第一种,全局设置: Vue.http.headers.common['token'] = 'YXBpOnBhc3N3b3Jk'; 第二种,拦截器设置 Vue.http.interceptors.pus ...

  6. 后置处理器----JSON提取器

    JSON提取器可以很方便的让你从JSON响应格式中提取数据. 1)Name:JSON提取器的名称. 2)Apply to:应用范围,有些采样器还嵌套子采样器,可以在此处设置JSON提取器是作用与主采样 ...

  7. mybatis学习笔记(五):mybatis 逆向工程

    mybatis学习笔记(五):mybatis 逆向工程 在日常开发中,如果数据库中存在多张表,自己手动创建 多个pojo 类和编写 SQL 语法配置文件,未免太过繁琐,mybatis 也提供了一键式生 ...

  8. loj#6041. 「雅礼集训 2017 Day7」事情的相似度(后缀自动机+启发式合并)

    题面 传送门 题解 为什么成天有人想搞些大新闻 这里写的是\(yyb\)巨巨说的启发式合并的做法(虽然\(LCT\)的做法不知道比它快到哪里去了--) 建出\(SAM\),那么两个前缀的最长公共后缀就 ...

  9. 【guava】对象处理

    一,equals方法 我们在开发中经常会需要比较两个对象是否相等,这时候我们需要考虑比较的两个对象是否为null,然后再调用equals方法来比较是否相等,google guava库的com.goog ...

  10. Python3之configparser模块

    1. 简介 configparser用于配置文件解析,可以解析特定格式的配置文件,多数此类配置文件名格式为XXX.ini,例如mysql的配置文件.在python3.X中 模块名为configpars ...