Javascript 在单击和单击时做出反应同时启动

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

如果我在手机上滑动或单击普通浏览器，它工作正常，每次只触发一个事件

如何处理此tap问题以避免触发两个事件

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

---

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

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

---

触发事件的时间有一个已定义的顺序（）：

预防事件

---

如果您想在触发

touchend

事件的情况下阻止

click

事件，可以在

touchend

事件处理程序中使用

event.preventDefault（）

来阻止

click

事件触发。

虽然晚了几年，但找到了一个非常容易实现的解决方案。看起来像这样：

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调用，这正是我想要的

为了避免触摸设备上的

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>

为什么您同时需要TouchStart和click？手机和桌面都会调用click。生命周期通常是：touchstart（mousedown）->touchend（mouseup）->单击。所以，除非你需要为touchstart做一些明确的事情，否则我就放弃它。我明白你的意思。我以前只有一个，但是，如果用户刷卡，它不会触发点击，只会触发触摸事件。这是一种旋转木马，用户可以点击或滑动“下一张卡”来滑动。我对这些控件的所有经验告诉我，这些控件不会同时启动？？你确定你对形势的分析是正确的吗？event.preventDefault（）在这里对你有帮助吗？@Shammoo我的意思是，它们是用同样的鼠标动作被触发的。当我点击时，两个事件都被触发，首先是

onTouchStart

，然后是

onClick

。My handle

this.myHandle

更改状态，因此组件将再次渲染。第二个事件（单击）仍会触发。

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