傳遞對象函數給eventlistener javascript

我想將成員函數附加到canvas eventListsner。似乎它不能吸收它。以下是html代碼的片段。我確實想將我的事件關聯到一個特定的對象，並且不希望它是靜態的。傳遞對象函數給eventlistener javascript

<!DOCTYPE html> 
<html> 
<body> 
<p>Graph</p> 
<canvas id="canvasGraph" width="600" height="400" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 
</br> 
<p><button onclick="main()">Try it</button></p> 

<script> 
"use strict"; 

var cg; 

function main() 
{ 
    var canvasElement = document.getElementById("canvasGraph"); 
    cg = new CanvasClass(100, canvasElement); 
    //alert(cg.test); 
    cg.addGraphListener(); 
} 

class CanvasClass 
{ 

    constructor(_testInt, _canvasElement) 
    { 
     this.test = _testInt; 
     this.canvasElement = _canvasElement; 
    } 

    getMousePos(evt) 
    { 
     var canvas = this.canvasElement; 
     var rect = canvas.getBoundingClientRect(); 
     return { 
      x: evt.clientX - rect.left, 
      y: evt.clientY - rect.top 
     }; 
    } 

    writeMessage(message) { 
     var canvas = this.canvasElement; 
     var context = canvas.getContext('2d'); 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     context.font = '18pt Calibri'; 
     context.fillStyle = 'black'; 
     context.fillText(message, 10, 25); 
     } 

    addGraphListener() 
    { 
     //alert(this.test); 
     this.canvasElement.addEventListener('click', this.testfunc, false); // Not as expected 
     this.canvasElement.addEventListener('click', this.listener, false); 
     this.canvasElement.addEventListener('click', CanvasClass.staticTest, false); 
    } 

    static staticTest() 
    { 
     alert(cg.test); // works but clumsy 
    } 

    testfunc() 
    { 
     alert(this.test); // object is not recognized 
    } 

    listener(evt) 
    { 
     //var mousePos = this.getMousePos(evt); // Uncaught TypeError: this.getMousePos is not a function 
     var mousePos = getMousePos(evt); // Uncaught ReferenceError: getMousePos is not defined 
     var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; 
     this.writeMessage(message); 
    } 
} 

</script>

來源

2016-02-12 Navish

需要確保正確的'this'。你知道函數.bind（）方法嗎？ – nnnnnn

這個問題已經被問及幾十次回答。請徹底搜索。 – 2016-02-12 07:28:27

謝謝nnnnnn，必須使用綁定。語法 - this.canvasElement.addEventListener（'click'，this.testfunc.bind（this），false）; this.canvasElement.addEventListener（'click'，this.listener.bind（this），false）; – Navish

試試這個

CanvasClass.protype.addGraphListener = function() 
{ 
     var tfunc = this.listener; 
     this.canvasElement.addEventListener('click', function(event){ 

      tfunc (evt); 

     }, false); 
} 

CanvasClass.protype.listener = function(evt) 
{ 
    var mousePos = this.getMousePos(evt); 
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; 
    this.writeMessage(message); 
} 

CanvasClass.protype.getMousePos= function(evt) 
{ 
    var canvas = this.canvasElement; 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top 
    }; 
}

來源

2016-02-12 07:08:09 gurvinder372

傳遞對象函數給eventlistener javascript

回答

相關問題