클래스 내에서 생성 된 자바 스크립트 마우스 이벤트 리스너

Question

내 클래스를 사용하여 마우스 수신기를 만드는 데 문제가 있습니다. 먼저 클래스 (new mouseEventManager())를 만든 다음 init() 함수를 호출하여 zoomHandler 함수를 설정합니다. 화면의 크기를 적절하게 조정하려면 클래스의 scale_level 변수를 사용해야합니다. 그러나 scale_level은 NaN (숫자가 아님)이라고합니다. 여기

코드입니다 :

function mouseEventManager() { 

this.designManager; 
this.canvasManager; 
this.scale_level; 

this.init = function(designManager, canvasManager) { 

this.designManager = designManager; 
this.canvasManager = canvasManager; 
this.scale_level = 1; alert(this.scale_level); 

var designManager = this.designManager; 

//general mousemove listener 
$(document).mousemove(function(e){ 
    designManager.HAND_X = e.pageX; 
    designManager.HAND_Y = e.pageY; 
}); 


//create scroll wheel listener 
if(window.addEventListener) { document.addEventListener('DOMMouseScroll', this.zoomHandler, false); } 
document.onmousewheel = this.zoomHandler; 

} 


this.zoomHandler = function() { 

var delta = 0; 

if (!event) event = window.event; 
// normalize the delta 
if (event.wheelDelta) { 
     // IE and Opera 
     delta = event.wheelDelta/60; 
} else if (event.detail) { 
     // W3C 
     delta = -event.detail/2; 
} 

if (delta > 0) { 
    //scroll wheel up 
    this.scale_level = this.scale_level * 1.25; alert(this.scale_level); 
    this.canvasManager.mainLayer.setScale(this.scale_level); 
    this.canvasManager.mainLayer.draw(); 
} else if (delta < 0) { 
    //scroll wheel down 
    this.scale_level = this.scale_level * 0.8; 
    this.canvasManager.mainLayer.setScale(this.scale_level); 
    this.canvasManager.mainLayer.draw(); 
} 

alert(delta); 

} 


} 

그것은 zoomHandler 내 모양의 mouseEventManager의 내부 구성원 중 어느 것도 정의되지 않습니다. 그래서 변수 스콥이나 뭔가 관련해서 뭔가 잘못하고 있다고 생각합니다.

도움 주셔서 감사합니다.

Answer 1

처리기의 this은 처리기가 실제로 호출 될 때 필요한 것이 아닐 수 있습니다. 다음과 같이

는 변화하는 것을 시도 :

var manager = this; 
this.zoomHandler = function() { 
    // ... 

를 다음 기능에 this를 사용하는 경우, 대신 manager, 개체에 "저장"참조를 사용합니다.

if (delta > 0) { 
    //scroll wheel up 
    manager.scale_level = this.scale_level * 1.25; alert(manager.scale_level); 
    manager.canvasManager.mainLayer.setScale(manager.scale_level); 
    manager.canvasManager.mainLayer.draw(); 
} else if (delta < 0) { 
    //scroll wheel down 
    manager.scale_level = manager.scale_level * 0.8; 
    manager.canvasManager.mainLayer.setScale(manager.scale_level); 
    manager.canvasManager.mainLayer.draw(); 
}