2 nombres soustraits l'un de l'autre font un NaN?

Question

J'essaie de soustraire 2 entiers les uns des autres, mais je continue à obtenir NaN. Quelqu'un peut-il expliquer s'il vous plaît ce qui ne va pas avec mon code

var moveit = null; 
p = function (e){ 

if ((e.target.id == "windowContainer") || (e.target.id == 
"windowContainer2") || (e.target.id == "windowContainer3")){ 
    console.log (e); 
    window.moveit = e.target; 
    window.onmousemove = p2; 
    var r = window.moveit.getBoundingClientRect(); 
    var rl = r.left; 
    var rt = r.top; 

    window.onmouseup = function (e){ 
    if (window.moveit == null) return; 
     window.moveit.onmousemove = window.moveit = null; 
    } 
} 
} 

p2 = function (e, rt, epageY){ 
    if (window.moveit == null) return; 
    var newY = rt - e.pageY; 
    console.log(isNaN(newY)); 
} 
document.getElementById('windowContainer').onmousedown = p; 
document.getElementById('windowContainer2').onmousedown = p; 
document.getElementById('windowContainer3').onmousedown = p; 

Answer 1

Les fonctions onMouseMove/bas passer un seul argument à leurs gestionnaires - un objet Event. Dans ce cas, e est le seul argument défini dans p2. Appelez la fonction vous comme celui-ci pour tester qu'il fonctionne:

p2({pageY: 100}, 50) 

enregistrerons false.

Answer 2

rt n'est pas une valeur, c'est la cause de vos problèmes. Vous devez passer dans votre événement onmousemove

var moveit = null; 
p = function(e) { 
    if (
    e.target.id == "windowContainer" || 
    e.target.id == "windowContainer2" || 
    e.target.id == "windowContainer3" 
) { 
    console.log(e); 
    window.moveit = e.target; 
    var r = window.moveit.getBoundingClientRect(); 
    var rl = r.left; 
    var rt = r.top; 
    window.addEventListener("mousemove", function(e) { 
     p2(e, rt); 
    }); 
    window.onmouseup = function(e) { 
     if (window.moveit == null) return; 
     window.moveit.onmousemove = window.moveit = null; 
    }; 
    } 
}; 

p2 = function(e, rt, epageY) { 
    if (window.moveit == null) return; 
    var newY = rt - e.pageY; 
    console.log(newY); 
}; 
document.getElementById("windowContainer").onmousedown = p; 
document.getElementById('windowContainer2').onmousedown = p; 
document.getElementById('windowContainer3').onmousedown = p; 

Ce bloc de code fonctionne correctement. Voici la liste des choses que je changé:

1. I ajouté addEventListener au lieu de .onmousemove, je considère que ce meilleur style de codage, mais vous pouvez faire comme vous le souhaitez (la différence de performance est minime, voire nul).

2. Dans l'événement mousemove, j'ai créé une fonction anonyme afin que vous puissiez passer en mode rt à partir de la valeur que vous avez calculée ci-dessus.