如何向javascript中定义的图像添加事件侦听器_Javascript

如何向javascript中定义的图像添加事件侦听器

javascript

如何向javascript中定义的图像添加事件侦听器,javascript,Javascript,如何将事件监听器添加到java脚本中定义的图像中，以便如果用户单击图像，它将重定向到其他HTML页面？我正在使用canvas元素 <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <

如何将事件监听器添加到java脚本中定义的图像中，以便如果用户单击图像，它将重定向到其他HTML页面？我正在使用canvas元素

<!DOCTYPE HTML>
   <html>
    <head>
    <style>
     body {
     margin: 0px;
     padding: 0px;
     }
     </style>
     </head>
<body>
<canvas id="myCanvas" width="578" height="1000"></canvas>
<script>
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
      context.strokeRect(188,50,237,473); //This is for generating outer rectangle
      context.fillStyle="FFFFFF";
      context.fillRect(188,50,237,473);
      context.strokeRect(200,90,213,365); //This is for generating the inner rectangle
      context.fillStyle="grey";
      context.fillRect(200,90,213,365);
      context.strokeRect(284,50,40,5); //This is for generating small notch at top
      context.fillStyle="grey";
      context.fillRect(284,50,40,5);
      var leftArrow = new Image();
      leftArrow.addEventListener('load', eventleftArrowLoaded , false);
      leftArrow.src = "leftArrow.jpg";
      function eventleftArrowLoaded() {
        drawScreen();
      }
     function drawScreen() {
     context.drawImage(leftArrow, 218, 482);//leftArrow
}
</script></body></html>

图像只是一个屏幕外位图，其像素内容恰好已复制到画布中。它无法接收事件，因为它不在DOM中

您需要将单击事件侦听器添加到画布，而不是图像：

canvas.addEventListener('click', myfunc, false);

如果您希望确保只将图像覆盖区域内的单击指向新页面，则需要检查鼠标单击坐标。

我没有理解您的意思，您能否详细解释一下图像没有屏幕显示，因此无法接收事件。我还有一个代码，可能会使图像成为可单击的图像，但是我无法将其嵌入到我的原始代码中，下面是代码LeftArrow var canvas=document.getElementByIdcanvas；var ctx=canvas.getContext2d；var BB=canvas.getBoundingClientRect；var offsetX=BB.left；var offsetY=BB.top；var startX，startY；var isDown=假；var PI2=数学PI*2；canvas.onmousedown=handleMousedown；var imgX=50；var-imgY=50；var img=新图像；img.onload=启动；img.src=leftArrow.jpg；函数start{ctx.drawImageimg，50,50；}函数handleMousedowne{e.preventDefault；e.stopPropagation；var x=e.clientX-offsetX；var y=e.clientY-offsetY；ifx>=imgX&&x=imgY&&y