阻止上层div触发点击事件，并触发下层div的点击事件

拼搏现实的明天。 2021-09-23 13:48 1012阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <div onclick="aa(1);" style="width: 200px;height: 200px;border: 1px solid blue;"></div>
  10.         <div onclick="aa(2);" style="width: 120px;height: 120px;top: 0px;position: absolute;border: 1px solid red;z-index: 111;pointer-events: none;"></div>
  12.     </body>
  13.     <script type="text/javascript"> function aa(num){ alert(num); } </script>
  14. </html>

在这里插入图片描述
红色div设置了z-index，在蓝色div的上面。

通常情况下，点击红色div是不会触发蓝色div的点击事件的，如果想屏蔽红色div的点击事件，需要像上面代码一样加上pointer-events: none;以阻止点击事件。

注：

  • pointer-events: none; 为css3语法，低版本ie不支持。
  • pointer-events: none; 实际阻止的是鼠标事件，hover等其他事件也会被一同阻止。

发表评论

表情：
评论列表 （有 0 条评论，1012人围观）

还没有评论，来说两句吧...

相关阅读