0

I have a button in an angular2 app. The app is running in chrome on a windows 10 touchscreen PC. If you touch the button normally it works fine, and the click function is executed, but if you hold 1-2 seconds, the button gets stuck and doesn't execute the function.

I have changed the css styling, to color the button black when the state :active is in effect, and the result is that the button stays black untill you touch somewhere else on the screen.

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

and the 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;
}

I can't reproduce the error on my keyboard/mouse machine, it only fails when long pressing on the touchscreen.

1 Answer 1

1

Maybe you move your finger just a little bit, causing the browser to see it as a mouse drag. I have had this problem before. Watching the mouse-up event worked for me.

Some touchscreen drivers trigger a rightmouseclick when you press and hold. If you have control over the touchscreen settings you might want to check these as well.

Not sure about the CSS. Can you post your current CSS code so we can have a look at it?

0

Not the answer you're looking for? Browse other questions tagged or ask your own question.