css - 如果长按触摸屏，Angular <button> 会卡住

Question

我在 angular2 应用程序中有一个按钮。该应用程序在 Windows 10 触摸屏 PC 上以 chrome 运行。 正常触摸按钮正常，点击功能执行，但如果按住1-2秒，按钮卡住，不执行功能。

我已经更改了 css 样式，当状态 :active 生效时将按钮着色为黑色，结果是按钮保持黑色直到您触摸屏幕上的其他地方。

<button id="myButton" type="button" class="Button" (click)="onClick()" 
[disabled]="buttonDisabled()">Click me<br></button>

和 CSS

.Button {
  background-color: #009de0;
  font-size: 24px;
  display: inline-block;
  width: 163px;
  height: 62px;
  line-height: 99%;
  border: none;
  border-radius: 0px;
  box-shadow: 0 0px #999;
  transition: 1.2s;
}

.Button:active {
  background-color: black;
  transform: translateY(2px);
  transition: 0.2s;
}

我无法在我的键盘/鼠标机器上重现错误，只有在触摸屏上长按时才会失败。

Answer 1

也许您只是稍微移动了手指，导致浏览器将其视为鼠标拖动。我以前遇到过这个问题。观看鼠标弹起事件对我有用。

某些触摸屏驱动程序会在您按住时触发鼠标右键单击。 如果您可以控制触摸屏设置，您可能还想检查这些设置。

不确定 CSS。 您可以发布您当前的 CSS 代码以便我们查看吗？