的JavaScript：處理事件

所以，我有這樣的代碼時，遇到了合適的對象：的JavaScript：處理事件

function Shape() { 
    ... 
    var canvas = document.getElementById('canvas'); 
    ... 

    canvas.onmousedown = handleMouseDown;  

} 

function handleMouseDown(e) { 
    this.width // Doesn't refer to the shape 
    // How do I get a reference to the shape here? 
}

的問題 - 我如何才能在我的事件處理程序形狀的參考？

來源

2013-01-14 appa

HandleMouseDown？爲什麼'e'指的是一個形狀？你必須創建你自己的函數來處理鼠標事件。 – Cristy

function handleMouseDown(e) { 
    console.log(e); 
}

然後看看在Web瀏覽器控制檯裏面是什麼e對象。特別是在e.target對象內。

來源

2013-01-14 12:03:56

-1

您可以綁定this功能的Shape實例內，使用.bind^[MDN]：

canvas.onmousedown = handleMouseDown.bind(this);

或者如果瀏覽器不支持.bind，使用閉包：

var self = this; 
canvas.onmousedown = function(event) { 
    handleMouseDown.call(self, event); 
};

但它也意味着this將不再引用DOM元素。不過，您可以通過event.target或event.currentTarget訪問它。

來源

2013-01-14 12:06:55

@downvoter：請解釋，否則我不能改善我的答案。 –

內，您的事件處理程序代碼，您想引用

this.width // in function handleMouseDown(e)

我不知道你怎麼想這個變量應該包含的內容。在函數Shape（）的上下文中它是一個可變寬度嗎？你沒有在例子中定義它，所以我只是猜測。無論如何，這會有什麼好處？

我想，如果我把它弄對了，你想管理一個畫布內的一些形狀，並希望在你的程序中引用它們。如果這是對的，我會試着概述你可能對這個問題做什麼。相對於你的畫布鼠標位置How do I get the coordinates of a mouse click on a canvas element?

然後，檢查對您的不同形狀的用自己的代碼的矩形區域：

獲取從鼠標點擊事件的位置。

爲每個形狀創建一個對象，該形狀包含x，y位置以及程序中每個形狀的寬度/高度。

爲這個形狀添加一個函數，該函數可以通過您的鼠標點擊事件處理程序代碼進行調用，或者僅在您的事件處理程序代碼中使用形狀的座標和其他相關屬性來應用任何更改。

來源

2013-01-14 12:48:10 Lemonade

的JavaScript：處理事件

回答

相關問題