为动态创建的Image()对象绑定多事件时mousedown等事件无法触发如何解决

• 通过new Image()创建的图片对象仅作为绘制数据源使用，未被插入到页面DOM树中，本身无法接收任何用户交互事件
• 调用ctx.drawImage()将图片渲染到canvas后，图片内容会变为画布上的像素集合，不再是独立的DOM元素，所有交互事件只能由canvas元素本身接收
• 页面h1元素的事件可正常触发，是因为h1是真实挂载在DOM树中的元素，可直接接收用户交互事件

实现思路：将交互事件绑定到canvas元素上，再通过坐标计算判断点击位置是否落在图片绘制区域，即可模拟图片的点击效果。
修改后的代码如下：

// 存储图片绘制的位置与尺寸信息
let drawImgMeta = null;

function myDraw(){
    var img = new Image();
    
    img.addEventListener('load', function() {
        const canvas = document.getElementById('canvas');
        // 直接赋值宽高比setAttribute更规范
        canvas.width = 1000;
        canvas.height = 1000;
        const ctx = canvas.getContext('2d');

        const drawX = 200, drawY = 200;
        // 记录图片实际绘制的坐标与宽高
        drawImgMeta = {
            x: drawX,
            y: drawY,
            width: img.width,
            height: img.height
        };
        ctx.drawImage(img, drawX, drawY);
    }, false);

    img.src = './floorplan.jpg';

    // 给canvas绑定mousedown事件
    const canvas = document.getElementById('canvas');
    canvas.addEventListener('mousedown', function(e) {
        // 计算点击相对于canvas左上角的坐标
        const canvasBounding = canvas.getBoundingClientRect();
        const clickX = e.clientX - canvasBounding.left;
        const clickY = e.clientY - canvasBounding.top;

        // 碰撞检测：判断点击是否在图片绘制区域内
        if (drawImgMeta && 
            clickX >= drawImgMeta.x && 
            clickX <= drawImgMeta.x + drawImgMeta.width &&
            clickY >= drawImgMeta.y && 
            clickY <= drawImgMeta.y + drawImgMeta.height) {
            alert('Mouse down on image');
        }
    }, false);

    const c1 = document.getElementById('h1');
    c1.addEventListener('mouseup',function(){
        alert('Mouse up');
    }, false);
}

myDraw();

如果绘制图片时传入了自定义缩放宽高，只需将drawImgMeta中的宽高替换为你传入的缩放值即可正常判断。

内容的提问来源于stack exchange，提问作者sr-py