泄漏点击事件
Leaking click event
我遇到了与 angular 中的 单击事件 有关的问题。
我的应用程序是 tic-tac-toe 应用程序。
我的应用程序使用 angular 材料。
问题: 当用户单击面板上的按钮时,click 事件似乎泄漏到面板上附近的按钮。下面的 图片展示了 我在说什么。
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
以不显示光标或 可能 一个普通按钮 ( not Material) 也可以。
长话短说:如果您更改了大部分外观,我建议不要使用 Material 组件,因为可能总会有副作用。
问题已解决
这是 Vimal Patel 在评论中发布的link。
我遇到了与 angular 中的 单击事件 有关的问题。 我的应用程序是 tic-tac-toe 应用程序。 我的应用程序使用 angular 材料。 问题: 当用户单击面板上的按钮时,click 事件似乎泄漏到面板上附近的按钮。下面的 图片展示了 我在说什么。 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
以不显示光标或 可能 一个普通按钮 ( not Material) 也可以。
长话短说:如果您更改了大部分外观,我建议不要使用 Material 组件,因为可能总会有副作用。
问题已解决
这是 Vimal Patel 在评论中发布的link。