2

我遇到了与角度中的点击事件有关的问题。我的应用程序是井字游戏应用程序。我的应用程序使用角材料问题:当用户单击板上的按钮时,单击事件似乎泄漏到板上附近的按钮中。下图演示了我在说什么。 问题的图像。如您所见,即使单击该按钮,第 1 行第 2 列中的按钮也已激活。下面是我的应用程序的闪电战。

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

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

4

2 回答 2

2

非常好的问题=)

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

如果你改变你的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)也可以工作。

长话短说:如果你改变它的大部分外观,我建议不要使用材质组件,因为可能总会有副作用。

于 2021-01-05T08:25:14.687 回答
0

问题解决了

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

于 2021-01-05T10:20:31.603 回答