Skip to main content
Adicionei informações que descobri a respeito do 'problema'.
Fonte Link
Luiz Vieira
  • 34,5mil
  • 6
  • 91
  • 160

EDIT2:

Descobri que no createjs.Container há uma propriedade chamada this.mouseChildren que quando desabilitada faz com que o objeto target enviado no payload dos eventos de mouse seja diretamente o objeto MyButton ao invés de seus componentes (o texto ou o shape colorido de fundo). Usando essa propriedade e o objeto target eu consigo resolver o problema da seguinte forma (veja esse novo JSFiddle de exemplo, agora com duas instâncias de botão):

//. . .

// Faz o target dos eventos ser diretamente o objeto MyButton, ao invés do texto
// ou do background nele inclusos
this.mouseChildren = false;

//. . .

// Função de tratamento do click no botão. Invoca o callback armazenado.
MyButton.prototype.handleClick = function(oEvent) {
    oEvent.target.clickCallback(oEvent.target);
}

Logando o this no console, eu percebi que ele se é de fato o objeto window. Por isso não funcionava o código. Não adicionei essa conclusão como uma resposta porque ainda me resta a dúvida de por que a função de tratamento do clique do mouse não é invocada no escopo do botão e sim da janela do navegador. Alguém sabe?

EDIT2:

Descobri que no createjs.Container há uma propriedade chamada this.mouseChildren que quando desabilitada faz com que o objeto target enviado no payload dos eventos de mouse seja diretamente o objeto MyButton ao invés de seus componentes (o texto ou o shape colorido de fundo). Usando essa propriedade e o objeto target eu consigo resolver o problema da seguinte forma (veja esse novo JSFiddle de exemplo, agora com duas instâncias de botão):

//. . .

// Faz o target dos eventos ser diretamente o objeto MyButton, ao invés do texto
// ou do background nele inclusos
this.mouseChildren = false;

//. . .

// Função de tratamento do click no botão. Invoca o callback armazenado.
MyButton.prototype.handleClick = function(oEvent) {
    oEvent.target.clickCallback(oEvent.target);
}

Logando o this no console, eu percebi que ele se é de fato o objeto window. Por isso não funcionava o código. Não adicionei essa conclusão como uma resposta porque ainda me resta a dúvida de por que a função de tratamento do clique do mouse não é invocada no escopo do botão e sim da janela do navegador. Alguém sabe?

Adicionei informações a respeito de não ter interesse em compartilhar a propriedade entre instâncias diferentes.
Fonte Link
Luiz Vieira
  • 34,5mil
  • 6
  • 91
  • 160

EDIT: a ideia é armazenar a propriedade de forma que ela seja diferenciada entre cada nova instância do objeto (como se fosse mesmo um atributo privado ou público de uma classe em outras linguagens). Soluções em que a propriedade é compartilhada (como se fosse estática) não são o interesse da pergunta.

EDIT: a ideia é armazenar a propriedade de forma que ela seja diferenciada entre cada nova instância do objeto (como se fosse mesmo um atributo privado ou público de uma classe em outras linguagens). Soluções em que a propriedade é compartilhada (como se fosse estática) não são o interesse da pergunta.

Fonte Link
Luiz Vieira
  • 34,5mil
  • 6
  • 91
  • 160

Dificuldade em armazenar propriedade em objeto no Javascript

Estou com uma dificuldade (que provavelmente é bem boba) em armazenar um valor em uma propriedade de um objeto em Javascript. Já fiz algo parecido recentemente utilizando this.propriedade = valor dentro da função "construtora" e não tive problemas em reutilizar o valor em uma função definida como `Objeto.prototype.nome_funcão".

Porém, nesse exemplo (disponível no JSFiddle) uma propriedade (this.m_oClickCallback) não é visível na função de tratamento do clique do mouse (MyButton.prototype.handleClick), gerando a seguinte exceção quando o botão é clicado:

Uncaught TypeError: Object [object global] has no method 'm_oClickCallback'

Eu imagino que provavelmente o erro se deve a algo bem bobo, mas não estou conseguindo enxergar o que é.

Aqui está o html do exemplo que eu preparei:

<body onload="init();">
    <canvas id="myCanvas" width="800" height="600">
        O seu navegador não suporta HTML5. (<i>Your browser does not support HTML5.</i>)
    </canvas>
</body>

E o código Javascript:

(function() {
    
    // Objeto de botão customizado
    var MyButton = function(sLabel, sColor, oClickCallback) {
        // Chama o initialize do objeto protótipo (createjs.Container)
        this.initialize();
        
        // Armazena a referência para o callback do evento de click
        this.m_oClickCallback = oClickCallback;
        
        // Cria o conteúdo do botão
        var oText = new createjs.Text(sLabel, "40px Arial", "#ffffff");
        oText.textBaseline = "top";
        oText.textAlign = "center";
        
        var iWidth = oText.getMeasuredWidth() + 30;
        var iHeight = oText.getMeasuredHeight() + 20;
        
        var oBackground = new createjs.Shape();
        oBackground.name = "Background";
        oBackground.graphics.beginFill(sColor).drawRoundRect(0, 0, iWidth, iHeight, 10);
        
        oText.x = iWidth / 2;
        oText.y = 10;
        
        this.addChild(oBackground, oText);

        // Captura o evento de click        
        this.addEventListener("click", this.handleClick);
    }  
    
    // Define o protótipo
    MyButton.prototype = new createjs.Container();
    
    // Função de tratamento do click no botão. Invoca o callback armazenado.
    MyButton.prototype.handleClick = function(oEvent) {
        this.m_oClickCallback(oEvent.target);
    } 
    
    // Atribui o objeto ao escopo global de "window"
    window.MyButton = MyButton;
}());

// Função de inicialização. Cria o botão no onload do corpo da página.
function init() {
    g_oStage = new createjs.Stage("myCanvas");
    var oButton = new MyButton("Olá mundo!", "red", function() { alert("Funciona!"); });
    g_oStage.addChild(oButton);
    g_oStage.update();
}