爲什麼我的javascript鼠標事件不會觸發？

這是我的想法是簡單的代碼：爲什麼我的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/

來源

2012-08-03 shino

全局的攻擊，'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/

來源

2012-08-03 19:51:35 Bergi

必須結合事件聽者

固定

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

來源

2012-08-03 19:52:39 Trevor

仍然沒有效果，它在兩個畫布上記錄「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); 
}

來源

2012-08-03 19:54:36 jbabey

我從來不知道'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鼠標事件不會觸發？

回答

相關問題