父元素设置pointerCapture后子元素丢失pointerup事件的问题

这个行为完全符合预期。

当调用setPointerCapture(pointerId)后，所有后续的pointer事件（包括pointerup）都会被绑定捕获的元素接收，不管指针实际落在哪个元素上。这是setPointerCapture的核心设计目的——保证拖拽过程中，即使指针移出目标元素，元素依然能持续接收事件，避免拖拽中断。

在你的测试场景里：

1. 点击子元素时，先触发child1的pointerdown，事件冒泡到parent1的pointerdown；
2. parent1调用setPointerCapture后，后续的pointerup直接发送给parent1，不会再触发child1的pointerup；
3. click事件的触发条件是同一个元素先后触发pointerdown和pointerup，child1没收到pointerup，自然不会触发它的click。

如果需要保留子元素的pointerup和click事件，有两种可行方案：

• 手动模拟事件
  在parent1的pointerup事件中，手动创建并派发事件给子元素：

  // 先在pointerdown时记录初始目标元素
  let clickTarget = null
  parent1.addEventListener('pointerdown', (e) => {
    clickTarget = e.target
    e.currentTarget.setPointerCapture(e.pointerId)
  })
  
  parent1.addEventListener('pointerup', (e) => {
    e.currentTarget.releasePointerCapture(e.pointerId)
    if (clickTarget) {
      // 派发pointerup事件
      const pointerUpEvent = new PointerEvent('pointerup', { bubbles: true, cancelable: true })
      clickTarget.dispatchEvent(pointerUpEvent)
      // 派发click事件
      const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true })
      clickTarget.dispatchEvent(clickEvent)
    }
    clickTarget = null
  })
  

  这种方式需要在pointerdown时记录初始点击的目标，避免误发给其他元素。

• 延迟调用setPointerCapture
  不在pointerdown时立即调用setPointerCapture，而是在检测到指针移动超过一定阈值（比如2px）时再调用。这样如果只是点击子元素而不拖拽，就能保留正常的事件触发流程：

  let isDragging = false
  parent1.addEventListener('pointerdown', (e) => {
    const startX = e.clientX
    const startY = e.clientY
    
    const handleMove = (moveE) => {
      const dx = Math.abs(moveE.clientX - startX)
      const dy = Math.abs(moveE.clientY - startY)
      if (dx > 2 || dy > 2) {
        isDragging = true
        e.currentTarget.setPointerCapture(e.pointerId)
        // 执行拖拽逻辑
        dosomething()
      }
    }
    
    const handleUp = () => {
      e.currentTarget.removeEventListener('pointermove', handleMove)
      e.currentTarget.removeEventListener('pointerup', handleUp)
      if (isDragging) {
        e.currentTarget.releasePointerCapture(e.pointerId)
        isDragging = false
      }
    }
    
    e.currentTarget.addEventListener('pointermove', handleMove)
    e.currentTarget.addEventListener('pointerup', handleUp)
  })
  

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