Warum wird der RemembereventList nicht ausgeführt?

Ich möchte die Mausposition nur erreichen, wenn meine Maustaste gedrückt wird. Nun kann es Koordinaten bekommen, wenn ich meine Maus drücken, aber es kann nicht aufhören, wenn ich Code unpressedWarum wird der RemembereventList nicht ausgeführt?

<!DOCTYPE HTML> 
<html> 

<head> 

    <body style="background-color:3F6E6F;"> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
    </style> 
</head> 

<body> 

    <canvas id="myCanvas" width="1200" height="1000" onmousedown="mouseDown()" onmouseup="mouseUp()"></canvas> 
    <script> 
    function writeMessage(canvas, message) { 
     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); 
    } 

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


    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 


    function mouseUp() { 
     canvas.removeEventListener('mousemove', mouseDown) 
     // alert('44') 
    } 

    function mouseDown() { 
     canvas.addEventListener('mousemove', function(evt) { 
     var mousePos = getMousePos(canvas, evt); 
     var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; 
     writeMessage(canvas, message); 
     }, false); 
    } 
    </script> 
</body> 

</html>

Es ist wie Ihr Beitrag aussieht, ist meist; Bitte fügen Sie weitere Details hinzu.

Quelle

2016-11-28 кузьмич

Die Fehlermeldung, die oben aufgetaucht, wenn Sie die Frage schrieb dort für eine reaon ist, so dass Sie würde das Problem tatsächlich erklären, und nicht nur eine Menge Code schreiben – adeneo

removeEventListener sollte ** genau die gleiche Funktion haben **, die als Callback angegeben wurde - also mache deine anonyme Funktion zu einer benannten Funktion und lege diese dann als Callback beim Hinzufügen und beim Entfernen des Listeners an –

Sie müssen passieren gleiche Argument function sowohl addEventListener und removeEventListener, damit es funktioniert. versuchen, dieses:

function writeMessage(canvas, message) { 
 
    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); 
 
} 
 

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

 
var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 

 
//create function here 
 
function move(evt) { 
 
    var mousePos = getMousePos(canvas, evt); 
 
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; 
 
    writeMessage(canvas, message); 
 
} 
 

 
function mouseUp() { 
 
    //pass the same arguments 
 
    canvas.removeEventListener('mousemove', move, false) 
 
    // alert('44') 
 
} 
 

 

 
function mouseDown() { 
 
    //pass the same arguments 
 
    canvas.addEventListener('mousemove', move, false); 
 
}

body { 
 
    background-color: 3F6E6F; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
canvas { 
 
    background-color: green; 
 
}

<canvas id="myCanvas" width="1200" height="1000" onmousedown="mouseDown(event)" onmouseup="mouseUp(event)"></canvas>

Quelle

2016-11-28 05:59:39 RizkiDPrast

Sie müssen genau die gleiche Funktion entfernen, die während addEventListerner Method.Like auf diese Weise verwendet wird:

var newFunction = function (e){ 
console.log(e); 
} 
document.body.addEventListener('mousemove',newFunction,false); 
document.body.removeEventListener('mousemove',newFunction,false);

Quelle

2016-11-28 05:57:22

Warum wird der RemembereventList nicht ausgeführt?

Antwort

Verwandte Themen