时间戳

首页 > 解决方案 > 角

css - 角

问题描述

我在 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;
}

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

标签： cssangulartypescript

解决方案

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

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

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

推荐阅读