為什么我的JavaScript鼠標事件不觸發？

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.onMouseDown （使用傳統事件注冊的跨瀏覽器安全）

另外，您的self變量是全局變量。 使用有效的處理程序附件，兩次單擊都將記錄為"2" 。 而且，在大多數使用self變量的地方都不需要self變量-唯一的需要就是事件處理程序。

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

為什么我的JavaScript鼠標事件不觸發？

問題描述

3 個解決方案

解決方案1
3 2012-08-03 19:52:39

解決方案2
2 2012-08-03 19:54:36

解決方案3
1 已采納 2012-08-03 19:51:35

為什么我的JavaScript鼠標事件不觸發？

問題描述

3 個解決方案

解決方案1 3 2012-08-03 19:52:39

解決方案2 2 2012-08-03 19:54:36

解決方案3 1 已采納 2012-08-03 19:51:35

解決方案1
3 2012-08-03 19:52:39

解決方案2
2 2012-08-03 19:54:36

解決方案3
1 已采納 2012-08-03 19:51:35