여러 객체에 동일한 onmouseover 함수 사용

Question

저는 그리드가 포함 된 JavaScript 및 PHP로 제작 게임을 만들고 있습니다. 사각형의 모든 추가 된 마지막 사각형의 x와 y를 갖고있는 것 같다,

for(x=0; x < width; x++) 
{ 
    for(y=0; y < height; y++) 
    { 
     var div = document.createElement("div"); 
     //... 
     div.onmouseclick = function() {blockClick(x, y)} 
     div.onmouseover = function() {blockMouseover(x, y)} 
     game.appendChild(div); 
    } 
} 

그러나 : 그리드의 각 사각형은 자신의 onMouseover와와하면 onMouseDown 기능, 사업부입니다. 왜 이런 일이 일어나고 있는지 알 수 있습니다 - 변수를 복제하는 대신 x와 y에 대한 포인터를 만들고 있습니다 - 어떻게 해결할 수 있습니까? 심지어 시도해도

for(x=0; x < width; x++) 
{ 
    for(y=0; y < height; y++) 
    { 
     var div = document.createElement("div"); 
     var myX = x; 
     var myY = y; 
     div.onmouseclick = function() {blockClick(myX, myY)} 
     div.onmouseover = function() {blockMouseover(myX, myY)} 
     game.appendChild(div); 
    } 
} 

같은 결과가 있습니다.

나는 Firefox에서는 작동하지만 IE에서는 작동하지 않는 div.setAttribute("onmouseover", ...)을 사용하고있었습니다. 감사합니다.

Answer 1

. 이 트릭을 수행해야합니다

이

for(var x=0; x < width; x++) { 
    for(var y=0; y < height; y++) { 
    var div = document.createElement("div"); 
    (function(x,y){ 
     div.onmouseclick = function() {blockClick(x, y)} 
     div.onmouseover = function() {blockMouseover(x, y)} 
    })(x,y); 
    game.appendChild(div); 
    } 
} 

이 일을하는 청소기 방법은 사업부를 만든 다음 각 반복에서 호출하는 함수를 정의하는 것입니다 :

var createDiv = function(x,y){ 
    var div = document.createElement("div"); 
    div.onmouseclick = function() {blockClick(x, y)}; 
    div.onmouseover = function() {blockMouseover(x, y)}; 
    return div; 
} 

for(var x=0; x < width; x++) { 
    for(var y=0; y < height; y++) { 
    game.appendChild(createDiv(x,y)); 
    } 
} 

Answer 2

주변 폐색 때문에 실제로 각 변수에서 동일한 변수를 공유하기 때문입니다. 그래서 당신은 같은 지역 클로저를 만들 필요가 : 당신은 x 및 y의 가치를 유지하기 위해 클로저를 만들 필요가

(function(x,y){ 
    div.onmouseclick = function() {blockClick(x, y)}; 
    div.onmouseover = function() {blockMouseover(x, y)}; 
})(x, y);