How to call a function outside of javascript click event

Question

Under the following code, how do I call the function searchBlock() in the canvas click event?this.searchBlock() can't work here!

Board.prototype = {
    addHandlerToBlock:function(){
        this.canvas.onclick = function(e){
            var e = window.event || e;
            var rect = this.getBoundingClientRect();
            var mouseX = e.clientX - rect.left;
            var mouseY = e.clientY - rect.top;
            var clickBlockId = this.searchBlock(mouseX, mouseY) || -1;
            if(clickBlockId >= 0){
                if(canMove(this.puzzle[clickBlockId])){
                    alert("ha")
                }
            }           
            this.refresh(p);
        }
    },
    searchBlock:function(x, y){
        for(var i = 0; i < this.puzzle.length; i++){
            if( x - this.puzzle[i].x > 0 && y - this.puzzle[i].y > 0){
                return i;
            }               
        }

    }
}

Like this: var board = new Board(); var block = board.searchBlock(x, y); — Katie Kilian
– Katie Kilian, Commented Oct 29, 2014 at 16:20
Is it good to new a board in the prototype function of Board? — Zk Liao
– Zk Liao, Commented Oct 29, 2014 at 16:27
Ah, no it isn't. I thought you meant an external click canvas onclick handler, my mistake. Let me post a more thorough answer. (It isn't necessarily always bad, but I think you are right to want to avoid it.) — Katie Kilian
– Katie Kilian, Commented Oct 29, 2014 at 16:29

Katie Kilian · Accepted Answer · 2014-10-29 16:33:35Z

2

Try this. It may not be strictly necessary to alias the this variable, but I like to do it because it is possible to invoke the method while passing in a different value for this.

Board.prototype = {
    addHandlerToBlock:function(){
        var that = this;  // alias to "this"
        this.canvas.onclick = function(e){
            ...
            var block = that.searchBlock(x, y);
        }
    },
    searchBlock:function(x, y){
        ...
    }
}

answered Oct 29, 2014 at 16:33

Katie Kilian

7,0335 gold badges45 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to call a function outside of javascript click event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related