目前代码:

<div class"box" onclick="a()">
    文字
    <div class="btn" onclick="b()">按钮A</div>
</div>

CSS:

.btn{
  z-index:1;
  position: absolute;
  right: 0px;
  top: 30px;
}

z-index可以解决遮挡问题,但此时会同时触发 a() 和 b()。

解决方案

实在没找到原生CSS的解决方案,尝试了用 pointer-event ,但是这个只能是父层没点击事件的情况下穿透。

后来琢磨出一种办法。

function a(){
  if(!Lock){
    ...
  }
}
function b(){
  Lock = true;
  ...
  setTimeout("Lock=false",100);
}