object가 panel.port.on에서 두 번 반환됩니다.

Question

contentScriptFile의 데이터가 프로그레시브 방식의 각 통화 기능에서 반환된다는 문제에 직면했습니다. 첫 번째 호출의 경우 1 인스턴스 만 반환하고 두 번째 호출의 경우 두 인스턴스를 반환하고 세 번째 호출의 경우 세 인스턴스를 반환합니다.

main.js :

var panel = panels.Panel({ 
    width: 270, 
    height: 255, 
    contentURL: self.data.url("panel.html"), 
    contentScriptFile: self.data.url("panelScript.js"), 
}); 

function handleClick(state) { 
    panel.show({ 
     position: button 
    }); 
} 

panel.on("show", function() { 
    panel.port.emit("pane"); 
}); 

panel.port.on("check", function(options) { 
    panel.hide(); 
    console.log(options); 
}); 

panelScript.js :

self.port.on("pane", function onShow() { 
    selectChoosen.addEventListener("click", function onClick(event) { 
     self.port.emit("check", options()); 
    }, false); 

}); 

function options() { 
    return selectedOptions; 
}; 

당신이 그것을 고정 할 수있는 방법을 알아 내기 위해 좀 도와 주 시겠어요?

Answer 1

이는 onShow 핸들러가 호출 될 때마다 클릭 핸들러를 추가하기 때문입니다. 대신 다음과 같이하고 싶다고 생각합니다.

selectChoosen.addEventListener("click", onClick, false); 

function onClick(event) { 
    self.port.emit("check", options()); 
} 

function options() { 
    return selectedOptions; 
}; 

... 이렇게하면 클릭 이벤트 수신기를 한 번만 추가 할 수 있습니다.