使用覆盖处理角点击事件

Question

我正试图得到所有的点击我的覆盖，我不知道angular是忽略他时，我点击另一个元素下的覆盖。

我创建了这个stackblitz，以查看问题是否发生在另一个地方，但我也遇到了类似的问题。https://stackblitz.com/edit/Angular-ivy-SJKWKC？file=src%2fapp%2fapp.component.html

null

.carta {
  width: 50px;
  height: 100px;
  position: relative;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0px 0px 6px 0px rgba(163,161,163,1);
  background-color: #fff;
}

.carta:hover {
  box-shadow: 0px 0px 8px 0px rgba(163,161,163,1);
  border-color: var(--preto);
  cursor: pointer;
}

.carta .overlay {
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
}

<div class="mao">
  <div class="carta">
    <div (click)="selecionaCarta($event, 'test')" class="overlay"></div>
    <span class="nome ouro">Here</span>
    <span class="naipe"></span>
  </div>
</div>

null

Answer 1

这是因为您的覆盖和文本都是绝对定位的。在您的情况下，您希望覆盖在顶部。

向覆盖类添加Z索引应该可以解决这个问题。

例如。

.carta .overlay {
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
  z-index: 10; // <<< this
}