javascript - 将点击事件处理程序添加到多个 Canvas 上

Question

我对 javascript 和 HTML5 相当陌生，所以如果结果证明这是一个愚蠢的错误，请原谅

我正在以编程方式绘制 3 个 Canvas ，其中包含一些文本和一个矩形，我想在每个 Canvas 上都有一个单击事件，我还需要知道哪个 Canvas 被单击，我编写了以下代码，但即使没有， doMouseDown 函数也会执行点击

<canvas id="myCanvas1" width="452" height="80" style="border:0px solid #d3d3d3;"></canvas>
<canvas id="myCanvas2" width="452" height="80" style="border:0px solid #d3d3d3;"></canvas>
<canvas id="myCanvas3" width="452" height="80" style="border:0px solid #d3d3d3;"></canvas>

       <script>
        function init()
        {
            var rect = { w: 300, h: 60 };
            var point = { x: 150, y: 10 };

            for (var i = 1 ; i < 4 ; i++) {
                var canvasStr = "myCanvas" + Number(i);
                var c = document.getElementById(canvasStr);
                var context = c.getContext("2d");

                // text
                context.font = "22pt Arial";
                context.lineWidth = 2;
                context.fillStyle = "#000000";

                var studentStr = "Student " + Number(i);
                context.fillText(studentStr, 5, 50);

                // rectangle
                context.strokeStyle = "black";
                context.strokeRect(point.x, point.y, rect.w, rect.h);

                context.fillStyle = "#00FF00";
                context.fillRect(point.x, point.y, rect.w, rect.h);
                c.addEventListener('mousedown', doMouseDown(canvasStr), false);
            }
        }

        function doMouseDown(canvasStr)
        {
            alert(canvasStr);
        }

        init();
    </script>

我该如何修复它并知道哪个 Canvas 已被单击(在本例中为canvasStr)

Answer 1

你可以这样做

c.addEventListener("mousedown", function () {
                    doMouseDown(canvasStr)
                }, false);

然后写入该函数

 function doMouseDown(canvasStr) {
             alert(canvasStr);
          }