Reports

Blacklisted phrase (0.5): I need
Long answer (-1):
Has code block (-0.5):
User mentioned (1): @Yogi&#039;s
Self-answer (0.5):
Low reputation (0.5):

Inspired by @Yogi's comments, I found a way to make it:

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"))
})
function dragHandler(e){
  // handling drag move event
  console.log('move')
}
parent1.addEventListener('pointerdown', (e) => {
  e.target.setPointerCapture(e.pointerId)
  e.target.addEventListener('mousemove', dragHandler)
  e.target.onlostpointercapture = (e) => {
    e.currentTarget.removeEventListener('mousemove', dragHandler)
    e.currentTarget.onlostpointercapture = null
  }
})

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

It seems that a pointer capture set on the parent element do prevent mouseup events from being fired on the child element, so I need to set the pointer capture on the child element (target) instead of the parent element (currentTarget).

The mouseup event of the parent element can be triggered normally through the bubbling.

79244099