pointerup事件在图片上释放时丢失，添加全屏canvas后生效，求原理

问题原因 #

你遇到的pointerup丢失问题本质是浏览器的默认图片拖拽行为导致的：
当用户在图片元素上按下指针并移动、随后释放时，浏览器会自动触发原生的图片拖拽会话，此时指针事件的所有权会被拖拽流程接管，原本绑定在document上的pointerup事件会被拦截，无法正常触发。

全屏canvas方案生效的原因 #

你动态创建的满屏canvas默认会插入到body的最后一个子节点位置，在没有显式设置z-index的情况下，DOM树中后插入的元素层级高于之前的元素，所以这个canvas相当于一层透明遮罩，完全覆盖在页面所有原有内容（包括触发问题的图片）上方。
此时你所有的指针交互都会直接命中canvas元素，不会接触到下方的图片，自然不会触发浏览器的默认图片拖拽逻辑，pointerup事件就能正常冒泡到document被监听器捕获。

更轻量的替代方案 #

如果不需要用到canvas的绘制能力，没必要额外插入占内存的全屏canvas，可以用以下方法直接解决问题：

• 给所有页面图片添加draggable="false"属性，禁用图片的原生拖拽能力
• 在pointerdown事件的回调函数开头添加e.preventDefault()，直接阻止默认行为触发
• 全局监听dragstart事件，直接返回false拦截拖拽流程

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