在多个画布上添加Click事件处理程序

Question

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

我正在用一些文本和矩形编程地绘制3个画布，我想要每个画布上的单击事件，我还需要知道哪个画布已被单击，我编写了以下代码，但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>

我如何修复它，知道哪个画布已被点击(canvasStr在这种情况下)

Answer 1

你可以这样做

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

，然后写入函数

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

Answer 2

如果在循环中附加侦听器，则必须创建闭包，否则canvasStr将始终== myCanvas3:

(function(str) {
    c.addEventListener('mousedown', doMouseDown.bind(str), false);
}(canvasStr));

那么你的回调应该是:

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

第一个参数e是始终传递给回调函数的Event对象。

添加

这样做没有意义:

var canvasStr = "myCanvas" + Number(i);

i已经是一个数字，您要将它添加到字符串中。只写:

var canvasStr = "myCanvas" + i;

Answer 3

另一种方法是将所有3个画布包装在一个容器div中，并侦听容器

上的事件http://jsfiddle.net/m1erickson/g7fsS/

<div id="container">
    <canvas id="myCanvas1" width="45" height="80"></canvas>
    <canvas id="myCanvas2" width="45" height="80"></canvas>
    <canvas id="myCanvas3" width="45" height="80"></canvas>
</div>           

document.getElementById("container").addEventListener("click",function(e){
    console.log(e.target.id);
},false);