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

转载

暴走的山交 2022-10-15 01:44:24

文章标签 javascript 前端 html 点击事件 文章分类 虚拟化云计算

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

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

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

阻止用户的点击动作产生任何效果
阻止缺省鼠标指针的显示
阻止CSS里的 hover 和 active 状态的变化触发事件
阻止JavaScript点击动作触发的事件

pointer-events:auto的应用案例：

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

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

<a class="tab_a tab_on" style="pointer-events:none;">年终奖</a>

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

三.解决方案
一般来讲，两个div元素叠加在一起，只有上层的点击事件才起效果，但有时我们想要实现下层元素点击事件起作用。可以有以下方法:

方法一(推荐方法)
对上层元素使用：pointer-events: none;这样点击事件就能穿透上层元素，找到下层的点击事件。
如果想让上层元素也能得到点击事件，只需要在你需要获得点击的上层元素子元素中加入：pointer-events: auto;理由请看二.(1)。
示例代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>doc</title>
  <style type="text/css">.div1{
    position:fixed;
    top:0;
    left:0;
    opacity:0;
   }
   .button1{
    display:inline-block;
    width:50px;
    height:50px;
   }
   .div2{
    position:fixed;
    top:0;
    left:0;
    pointer-events: none; 
    border:1px solid black;
    opacity:1;
   }
   .button2{
    display:inline-block;
    width:100px;
    height:100px;
    pointer-events: auto;
   }
   .div1 input{
    display:block;
   }</style>
 </head>
 <body>
  <div class="div1">
      姓名<input type="text" name='name' >
      专业<input type="text" name='subject' >
      班级<input type="text" name='class' >
   <button class="button1">button1</button>
  </div>
  <div class="div2">
   <button class="button2">button2</button>
   <div>姓名</div>
   <div>专业</div>
   <div>班级</div>
  </div>
 </body>
 <script type="text/javascript">var test={
   button1: document.getElementsByClassName('button1')[0],
   button2: document.getElementsByClassName('button2')[0],
   button1Click: function(){
    var that=this;
    that.button1.οnclick=function(){
     console.log('Button1 is success!!!');
    }
   },
   button2Click: function(){
    var that=this;
    that.button2.οnclick=function(){
     console.log('Button2 is success!!!');
    }
   }
  }
  function main(){
   test.button1Click();
   test.button2Click();
  }
  main();</script>
</html>

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>doc</title>
  <style type="text/css">.div1{
    position:fixed;
    top:0;
    left:0;
    opacity:0;
    z-index:2;
   }
   .button1{
    display:inline-block;
    width:50px;
    height:50px;
   }
   .div2{
    position:fixed;
    top:0;
    left:0;
    pointer-events: none;
    border:1px solid black;
    opacity:1;
   }
   .button2{
    display:inline-block;
    width:100px;
    height:100px;
    pointer-events: auto;
   }
   .div1 input{
    display:block;
   }</style>
 </head>
 <body>
  <div class="div1">
      姓名<input type="text" name='name' >
      专业<input type="text" name='subject' >
      班级<input type="text" name='class' >
   <button class="button1">button1</button>
  </div>
  <div class="div2">
   <button class="button2">button2</button>
   <div>姓名</div>
   <div>专业</div>
   <div>班级</div>
  </div>
 </body>
 <script type="text/javascript">var test={
   button1: document.getElementsByClassName('button1')[0],
   button2: document.getElementsByClassName('button2')[0],
   button1Click: function(){
    var that=this;
    that.button1.οnclick=function(){
     console.log('Button1 is success!!!');
    }
   },
   button2Click: function(){
    var that=this;
    that.button2.οnclick=function(){
     console.log('Button2 is success!!!');
    }
   }
  }
  function main(){
   test.button1Click();
   test.button2Click();
  }
  main();</script>
</html>