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

问题描述：

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

为什么控制台不能与身份证号码弹出？

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

全局的攻击，'var'对自己来说不是可选的。另外self在JavaScript中有意义，选择一个不同的变量名称。 – epascarello 2012-08-03 19:51:12

啊，一个隐含的全局变量'self'与现有的全局变量'self'碰撞的一个很好的例子。记住孩子，申报你的变数。 – 2012-08-03 19:51:40

@epascarello它在浏览器环境中具有意义（因为它是对全局对象的引用），但它在JavaScript *本身*中没有意义。 – 2012-08-03 19:53:55

答

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/

答

必须结合事件听者

固定

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

仍然没有效果，它在两个画布上记录“2” – Bergi 2012-08-03 20:03:23

你是对的，忘记decalare'var self = this'; – Trevor 2012-08-03 20:05:21

答

self之前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 – Trevor 2012-08-03 19:57:59

@jbabey：这是'window'的属性，是的，但为什么它应该是一个错误的变量名称（对于局部变量）呢？ – Bergi 2012-08-03 20:07:59

@Bergi http://en.wikipedia.org/wiki/Variable_shadowing“这可能会导致混淆，因为它可能不清楚哪个变量后续使用了阴影变量名称。” – jbabey 2012-08-03 20:21:43

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

相关推荐