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} > </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} > </div>