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

How to add Event listener to image defined inside javascript

本文关键字：javascript 定义 图像 添加 事件 侦听器      更新时间：2023-09-26

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

<!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 中。

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

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

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

相关文章：