1

这是我认为很简单的代码：

<html>
    <head>
        <script>

            function Foobar(id) {

                self = this;

                self.id = id;
                self.canvas = document.createElement('canvas');
                self.canvas.style.border = '1px solid black';
                document.body.appendChild(self.canvas);
                self.canvas.addEventListener('mousedown', self.onMouseDown, true);

                self.onMouseDown = function(e) {
                    console.log(self.id);
                }

            }            

            var s1, s2;

            function onLoad() {
                s1 = new Foobar(1);
                s2 = new Foobar(2);
            }

        </script>
    </head>
    <body onload='onLoad()'>
    </body>
</html>

为什么控制台不弹出id号？

这是一个小提琴：http: //jsfiddle.net/VRn7v/

4

3 回答 3

3

您必须self在绑定事件侦听器之前分配方法

固定的

http://jsfiddle.net/landau/VRn7v/3/

于 2012-08-03T19:52:39.683 回答
2

self是window对象的属性，通常是错误的变量名。此外，您的self变量是隐式全局变量，因为您缺少var关键字。最后，在声明事件处理程序之前绑定它。

function Foobar(id) {
    var that = this; // pick a better name, and use "var"
    that.id = id;
    that.canvas = document.createElement('canvas');
    that.canvas.style.border = '1px solid black';
    document.body.appendChild(that.canvas);

    that.onMouseDown = function(e) {
        console.log(self.id);
    }; // missing semicolon

    // bind the handler after declaring it
    that.canvas.addEventListener('mousedown', that.onMouseDown, true);
}
于 2012-08-03T19:54:36.643 回答
1 
self.canvas.addEventListener('mousedown', self.onMouseDown, true);

在这一行中，self.onMouseDownis undefined，因为您仅在之后分配它。使其工作的可能的快速修复：

  • 将函数创建/分配移到用法之上
  • 将onMouseDown函数移动到原型（不好，self范围内没有本地）
  • 不使用self.onMouseDown, 但是self.canvas.onmousedown（使用传统事件注册跨浏览器安全）

此外，您的self变量是全局的。使用有效的处理程序附件，两次点击都会记录"2"。而且，在self您使用它的大多数地方都不需要该变量 - 唯一需要它的是事件处理程序。

更正小提琴：http: //jsfiddle.net/VRn7v/2/

于 2012-08-03T19:51:35.720 回答