Question

我的React应用程序中有一个div，我需要处理点击和触摸。但是，当我点击手机时，它会触发两个事件。

如果我在手机上滑动或者点击普通浏览器，它可以正常工作，每种情况下只会触发一个事件。

如何处理此问题以解决这两个事件？

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

Answer 1

使用触摸和鼠标之间的类似事件解决了这个问题。 touchStart / mouseDown或touchEnd / mouseUp。根据每种情况，它会发射一个或另一个。

<div
  className={myClasses}
  onMouseUp={this.myHandle}
  onTouchEnd={this.myHandle}
  >&nbsp;
</div>

Answer 2

事件触发时应有明确的顺序：

touchstart
Zero or more touchmove events, depending on movement of the finger(s)
touchend
mousemove
mousedown
mouseup
click

来源：https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent#Event_order

防止事件

如果要防止发生click事件，以防之前触发touchend事件，可以在event.preventDefault()事件处理程序中使用touchend来防止{{ 1}}触发事件。

Answer 3

这已经晚了几年，但是找到了一个真正易于实现的解决方案。看起来像这样：

import ReactDom from 'react-dom';

export default class YourClass extends Component {

componentDidMount(){
        ReactDOM.findDOMNode(this).addEventListener('touchstart', (e)=>{ 
            e.preventDefault(); 
            console.log("touchstart triggered");
        });
    }
}

似乎它拦截并停止了我一直在寻找的移动设备上的所有onClick呼叫

Answer 4

为避免在触摸设备上onClick()，您应检查页面是否在触摸设备中打开。

要查看天气是否在触摸设备中打开：

if (typeof document !== 'undefined') {
  var isTouch = 'ontouchstart' in document.documentElement;
}

然后将{isTouch ? undefined : this.myHandle}修改为鼠标事件：

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

同时激活onClick和onTouchStart

4 个答案: