arrays - 泄漏点击事件

Question

我遇到了与 相关的问题点击事件 在角度。
我的申请是 井字游戏应用程序 .
我的应用程序使用 角材 .
问题:当用户单击板上的按钮时，点击事件似乎泄漏到附近的按钮 在板上。以下图片演示 我在说什么。
Image of problem .如您所见，即使未单击该按钮，第 1 行第 2 列中的按钮也已激活 .以下是 我的应用程序的 Blitz 。
https://stackblitz.com/github/flashato9/tic-tac-toe
如果我能在这个问题上得到一些帮助，那就太好了。谢谢!

Answer 1

非常好的问题=)
所以问题似乎是，垫子按钮以某种方式响应文本光标位置的变化。
如果你改变你的 square.component.html 像这样:

<div class="grid-button"><span>{{value}}</span></button>

并像这样更改 square.component.scss:

.grid-button{
  width: 100%;
  height: 100%;
  background-color: rgb(91, 158, 91);
  font-size: 10rem;
  border-radius: 4px;
  text-align: center;
  padding: 50px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.grid-button:hover {
    background-color: green;
}

当您现在单击“按钮”时，您会清楚地看到，光标会跳转到下一个字段。但是一个简单的 div似乎对 :hover 没有反应到那个。
您可以在上面的 CSS 中添加 user-select: none;到 .grid-button不显示光标或普通按钮(不是 Material )也可以。
长话短说:如果您更改大部分外观，我建议不要使用 Material 组件，因为可能总会有副作用。