在父元素上设置pointerCapture后，子元素中缺少pointerup事件

Question

我想在元素上实现拖动效果，所以我在其

setPointerCapture

事件处理程序中使用了

pointerdown

，如下所示：

ele.addEventListener('pointerdown', (e)=>{
  e.currentTarget.onpointermove = dosomething()
  e.currentTarget.setPointerCapture(e.pointerId)
})
ele.addEventListener('pointerup', (e)=>{
  e.currentTarget.onpointermove = null
  e.currentTarget.releasePointerCapture(e.pointerId)
})

但是，当我处理其子元素上的事件时遇到问题：

let parent1 = document.querySelector('#parent1') 
let child1 = document.querySelector('#child1')
document.querySelectorAll('.log').forEach(ele => {
  ele.addEventListener('pointerdown', e => console.log(ele.id + " pointerdown"))
  ele.addEventListener('pointerup', e => console.log(ele.id + " pointerup"))
  ele.addEventListener('click', e => console.log(ele.id + " click"))
})
parent1.addEventListener('pointerdown', (e) => {
  e.currentTarget.setPointerCapture(e.pointerId)
})
parent1.addEventListener('pointerup', (e) => {
  e.currentTarget.releasePointerCapture(e.pointerId)
})

<div id='parent1' class='log'><div id='child1' class='log'>click me</div></div>

当我单击子元素时，我会收到以下控制台日志：

child1 pointerdown
parent1 pointerdown
parent1 pointerup
parent1 click

与以下示例相比，缺少

child1 pointerup

和

child1 click

document.querySelectorAll('.log').forEach(ele => {
  ele.addEventListener('pointerdown', e => console.log(ele.id + " pointerdown"))
  ele.addEventListener('pointerup', e => console.log(ele.id + " pointerup"))
  ele.addEventListener('click', e => console.log(ele.id + " click"))
})

<div id='parent2' class='log'><div id='child2' class='log'>click me</div></div>

这种行为是预期的吗？如果是的话，是否可以捕获子元素上的mouseup/click事件？

Answer 1

let parent1 = document.querySelector('#parent1') 
let child1 = document.querySelector('#child1')
document.querySelectorAll('.log').forEach(ele => {
  ele.addEventListener('pointerdown', e => console.log(ele.id + " pointerdown"))
  ele.addEventListener('pointerup', e => console.log(ele.id + " pointerup"))
  ele.addEventListener('click', e => console.log(ele.id + " click"))
})
parent1.addEventListener('pointerdown', (e) => {
  e.currentTarget.setPointerCapture(e.pointerId)
})
parent1.addEventListener('pointerup', (e) => {
  e.currentTarget.releasePointerCapture(e.pointerId)
})

<div id='parent1' class='log'><div id='child1' class='log'>click me</div></div>