Question

以下是我认为简单的代码：

<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/

Answer 1

在绑定事件侦听器

之前，必须在self上分配方法

<强>固定

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

Answer 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);
}

Answer 3

self.canvas.addEventListener('mousedown', self.onMouseDown, true);

在这一行中，self.onMouseDown为undefined，因为您之后才会分配它。可能的快速修正工具：

将功能创建/分配移至使用上方
将onMouseDown函数移动到原型中（错误，范围内没有本地self）
不要使用self.onMouseDown，而是self.canvas.onmousedown（与传统事件注册跨浏览器安全）

此外，您的self变量是全局变量。使用工作处理程序附件，两次单击都将记录"2"。并且，在您使用它的大多数地方都不需要self变量 - 唯一需要的是在事件处理程序中。

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

为什么我的javascript鼠标事件不会触发？

3 个答案: