泄露点击事件

问题描述

我遇到了与角度点击事件相关的问题。 我的应用程序是一个井字游戏。 我的应用程序使用角材料。 问题：当用户单击板上的按钮时，点击事件似乎泄漏到板上附近的按钮。下面的图片展示了我在说什么。 Image of problem。如您所见，第 1 列第 2 行中的按钮被激活，即使该按钮未被点击。下面是我的应用程序的闪电战。

https://stackblitz.com/github/flashato9/tic-tac-toe

如果我能在这个问题上得到一些帮助，那就太好了。谢谢！

解决方法

非常好的问题 =)

所以问题似乎是，垫子按钮以某种方式响应文本光标位置的变化。

如果你像这样改变你的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 组件，因为可能总会有副作用。

,

问题已解决

这是 Vimal Patel 在评论中发布的 link。