Skip to content
Advertisement

React onClick and onTouchStart fired simultaneously

I have a div in my React app and I need to handle both clicks and touches. However, when I tap on a mobile, it fires both events.

If I swipe on a mobile or if I click on a normal browser, it works fine, only one event is fired in each case.

How can I handle this tap issue to not fire both events?

<div
  className={myClasses}
  onClick={this.myHandle}
  onTouchStart={this.myHandle}
  >&nbsp;
</div>

Advertisement

Answer

Solved this problem using similar events between touch and mouse. touchStart/mouseDown or touchEnd/mouseUp. It fires one or another, according to each situation.

<div
  className={myClasses}
  onMouseUp={this.myHandle}
  onTouchEnd={this.myHandle}
  >&nbsp;
</div>
User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement