React拖拽日历移动端onTouchStart触发父级点击及事件失效问题求助

修复步骤 #

1. 修正状态赋值逻辑
   你当前直接修改this.state.mylatesttap的写法不符合React规范，不会触发状态同步，极端场景下会出现双击判断失效，需要改用setState更新状态：

// 父级修正后代码
Sectiondoubletap(e) {
  debugger
  const now = new Date().getTime();
  const timesince = now - this.state.mylatesttap;
  if((timesince < 300) && (timesince > 0)){
    this._handleDoubleClickSpaltenBody(e)
    console.log("Sectiondoubletap worked")
  }
  this.setState({
    mylatesttap: new Date().getTime()
  })
}

// 子级修正后代码
handleTouchStart(ev) {
  ev.stopPropagation();
  console.log("handleTouchStart");
  const now = new Date().getTime();
  const timesince = now - this.state.mylatesttap;
  if((timesince < 300) && (timesince > 0)){
    this._handleDoubleClickItem(ev)
    console.log("Appoinmentdoubletap worked")
  }else{
    this.handleDrag(ev);
  }
  this.setState({
    mylatesttap: new Date().getTime()
  })
}

2. 添加CSS规则阻断浏览器默认触摸行为
   浏览器默认的触摸滚动、双击缩放行为会拦截自定义触摸事件，给父子元素添加以下样式：

/* 父级容器和子拖拽元素都加该样式 */
.calendar-section, .calendar-drag-item {
  touch-action: manipulation; /* 禁用双击缩放，保留正常滚动能力 */
  /* 拖拽场景如果不需要默认滚动，可改为 touch-action: none; */
  cursor: pointer;
}

3. 修正Chrome开发者工具模拟配置
   仅调整分辨率不会触发触屏事件，需要手动开启触控模拟：

• 打开F12设备工具栏后，点击顶部手指形状的「触控」按钮启用模拟
• 或者在「更多工具」-「传感器」面板中，将触控选项设置为「已启用」

4. 检查事件绑定与层级问题

• 确认子元素onTouchStart绑定拼写正确，没有写错事件名
• 检查子元素没有被z-index更高的透明元素遮挡，导致触摸事件被上层元素捕获

内容的提问来源于stack exchange，提问作者afnan