为什么我的 javascript 鼠标事件没有触发？答案

【问题标题】：Why does my javascript mouse event not fire?为什么我的 javascript 鼠标事件没有触发？
【发布时间】：2012-08-03 19:47:25
【问题描述】：

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

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

【问题讨论】：

全局攻击，var 不是 self 可选的。在 JavaScript 中 self 也有意义，选择一个不同的变量名。
啊，一个隐式全局变量 self 与现有全局变量 self 冲突的好例子。记住孩子，声明你的变量。
@epascarello 它在浏览器环境中有意义（因为它是对全局对象的引用），但在 JavaScript 本身中没有意义。

标签： events mouse javascript

【解决方案1】：

你必须在绑定事件监听器之前给self分配方法

已修复

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

【讨论】：

【解决方案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);
}

【讨论】：

我从来不知道self 是window 对象。我从未见过有人使用self 来引用窗口对象。坦率地说，我不认为这是一个 var 名称的错误选择。 T
@jbabey：它是window 的一个属性，是的，但为什么它应该是一个错误的变量名（对于局部变量）？
@Bergi en.wikipedia.org/wiki/Variable_shadowing "这可能会导致混淆，因为可能不清楚后续使用的阴影变量名称是指哪个变量。"
当函数顶部有一个明确的（和常见的）声明 ... = this; 时，我认为没有人会怀疑它是 window.self。但是感谢弹药，如果我参与讨论 this 指针的名称，我个人也更喜欢 that :-)

【解决方案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/

【讨论】：