向同一个HTML Image()对象添加多个事件

Question

我试图将事件添加到我动态创建的Image对象(使用Image()构造函数)并绑定到HTML画布元素。我已经成功添加了"加载"。事件。但是，我不能添加任何其他事件，例如"click"或";mousedown"。Javascript和HTML代码块粘贴在下面。

"load"事件处理程序被调用，我得到警报。然而，"mousedown"事件不是。为什么我看到这种行为，我该如何纠正它?

非常感谢你的帮助。

ps:鼠标"元素上的事件可以正常工作。

function myDraw(){
var img = new Image();   // Create new img element

img.addEventListener('load', function() {
alert('Loaded! img type is n' + typeof img);
// execute drawImage statements here
const canvas = document.getElementById('canvas');
canvas.setAttribute('width', 1000);
canvas.setAttribute('height', 1000);
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 200,200);
}, false);
img.src = './floorplan.jpg'; // Set source path
img.addEventListener("mousedown",function(){
alert('Mouse down');
}, false);
const c1 = document.getElementById('h1');
c1.addEventListener('mouseup',function(){
alert('Mouse up');
}, false);
}
myDraw();

<div>
<h1 id="h1">CANVAS</h1>
<canvas id="canvas"></canvas>
<!--img id="fplan" src = "./floorplan.jpg" /-->
</div>
<script src='./script.js' type="text/javascript"></script>

Answer 1

似乎我需要将事件侦听器添加到画布元素中，而不是加载到画布上的图像。

c1.addEventListener('click',clickZoom, false);行实现了这一点。

const c1 = document.getElementById('canvas');
c1.setAttribute('width', 1000);
c1.setAttribute('height', 1000);
const ctx = c1.getContext('2d');
var img = new Image();   // Create new img element
function myDraw(){
img.addEventListener('load', function() {
// execute drawImage statements here
ctx.drawImage(img, 200,200);
}, false);
img.src = './floorplan.jpg'; // Set source path
c1.addEventListener('click',clickZoom, false);
}
function clickZoom() {
alert('Zoom clicked');
ctx.drawImage(img, 200, 200, ctx.canvas.width * 0.5, ctx.canvas.height * 0.5);  // this needs changing wrt image size not canvas size!!
}
myDraw();

<div>
<h1 id="h1">CANVAS</h1>
<canvas id="canvas"></canvas>
<!--img id="fplan" src = "./floorplan.jpg" /-->
</div>
<script src='./script.js' type="text/javascript"></script>