为什么我的javascript鼠标事件没有启动

Why does my javascript mouse event not fire?

本文关键字：启动 事件 鼠标 我的 javascript 为什么      更新时间：2023-09-26

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

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

在绑定事件列表之前，必须在self上分配方法

固定

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

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.canvas.addEventListener('mousedown', self.onMouseDown, true);

在这一行中，self.onMouseDown是undefined，因为您只在之后分配它。可能的快速修复：

  • 将函数创建/分配移到用法之上
  • 将onMouseDown函数移动到原型（错误，作用域中没有本地self）
  • 不使用self.onMouseDown，而是使用self.canvas.onmousedown（使用传统事件注册的跨浏览器安全）

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

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

相关文章：