如何解决上层div元素将下层div元素盖住,但是下层div里的点击事件仍可以进行的问题?

一.实例分析

现在我们需要实现一个div文本输入框,其中含有button按钮在下层,上层div覆盖住下层div元素,上层div中同样含有一个button按钮的效果图。我们应该如何做来使下层div里的button点击事件有效果呢?


二.知识点整理

在解决这个问题之前,让我们先了解与解决这个问题有关的一些知识点。

(1).pointer-events直译为指针事件,是一个与javascript有关的属性。
pinter-events中有两个与javascript有关的属性值为auto和none,其余属性暂且与javascript无关。
auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。
none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
(2).pointer-events:none可以直接让鼠标事件无效,但是,其并不能让键盘事件无效。
从别的资料上看到的一个形象的观点是:
可以将pointer-events:none理解为“幻影特性”。pointer-events:none的作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素,则我们在页面上看到的这个按钮,只是一个虚幻的影子而已,您可以理解为海市蜃楼,幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。一切都是幻影!
(3).pointer-events:none;的作用:

  • 阻止用户的点击动作产生任何效果

  • 阻止缺省鼠标指针的显示

  • 阻止CSS里的 hover 和 active 状态的变化触发事件

  • 阻止JavaScript点击动作触发的事件

(4)pointer-events:auto的应用案例:

  • 提交页面,提交按钮点击后,添加这个样式属性(style=“pointer-events”),来防止重复提交。
  • 一些层的绝对定位,覆盖按钮,穿透可以点击它。例如:在许多网站上过节的时候页面最上层会用canvas绘制的雨、雪花,避免这些悬浮物遮挡住页面从而影响鼠标点击,可以使用pointer-events=none属性,让这些上方的canvas不会遮挡鼠标事件,让鼠标事件可以穿透上方的canvas来点击页面。

(5)a标签应用disabled属性是无法阻挡任何鼠标经过或是点击事件的(虽然IE下置灰但实际上,在绝大多数浏览器下,a标签应用disabled可以禁用键盘事件(避开tab键的索引)。
如果我们想要实现禁用a标签链接或按钮。
实现这一功能的方式是:pointer-events:none & without href
示例代码如下:

 年终奖

(6)z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
z-index 仅能在定位元素上奏效(例如 position:absolute;)


三.解决方案
  • 一般来讲,两个div元素叠加在一起,只有上层的点击事件才起效果,但有时我们想要实现下层元素点击事件起作用。可以有以下方法:
  • 方法一(推荐方法)
    对上层元素使用:pointer-events: none;这样点击事件就能穿透上层元素,找到下层的点击事件。
    如果想让上层元素也能得到点击事件,只需要在你需要获得点击的上层元素子元素中加入:pointer-events: auto;理由请看二.(1)。
    示例代码:


 
  
  doc
  
 
 
  
姓名 专业 班级
姓名
专业
班级
  • 方法二
    还可以使用z-index属性设置层数。因为下层元素无法点击的本质是html元素的叠加,如果将他们分层处理也可以解决问题。设置下层层数比上层层数大时,下层点击事件便有效,上层点击事件有效。设置上层层数比下层层数大时,上层点击事件便有效,下层点击事件无效。
    示例代码:


 
  
  doc
  
 
 
  
姓名 专业 班级
姓名
专业
班级

你可能感兴趣的:(JS)