Question

所以我编写了一个小的javascript来将几个变量传递给另一个函数，但是当我运行时没有任何事情发生在我想错的地方？

    <canvas id="canvas" width="1350" height="400"
    style="background-color:#333" onmousemove="F(event)">
    </canvas>


    <script type="text/javascript">
    function Reset() 
    {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.font = "30px Arial";

        ctx.fillStyle = "#333";
        ctx.fillRect(0,0,1350,400);
    }


    function F(e,x1,y1,x2,y2)
    {
        var mouseX, mouseY;
        var xyz,xx,yy,xxx,yyy;

        xx = x1;
        yy = y1;
        xxx = x2;
        yyy = y2;

        if(e.offsetX) {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
        }
        else if(e.layerX) {
            mouseX = e.layerX;
            mouseY = e.layerY;
        }

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.font = "30px Arial";
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(xx,yy,xxx,yyy);

        Handler(mouseX,mouseY);
    }

    function Handler(val,val1)
    {
        mouseX1 = val;
        var mouseX2,mouseY2,mouseY1,mouseX1;
        mouseX2 = mouseX1 + 20;
        mouseY2 = mouseY2 + 20;
        mouseY1 = val1;
        document.getElementById("x").innerHTML= mouseX1;
        document.getElementById("y").innerHTML= mouseY1;

        F(e,mouseX1,mouseY1,mouseX2,mouseY2);
    }
    </script><center>
    <p id="x"></p><p id="y"></p>

在上面的代码中，我试图将少量值传递给函数F()，以根据转发的值绘制矩形。但我什么都不知道我哪里出错了？

由于

Answer 1

当您收到Handler功能的事件时，请再次将其传回F功能。否则e未在F

中定义

function Reset() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.font = "30px Arial";

  ctx.fillStyle = "#333";
  ctx.fillRect(0, 0, 1350, 400);
}

function F(e, x1, y1, x2, y2) {
  var mouseX, mouseY;
  var xyz, xx, yy, xxx, yyy;

  xx = x1;
  yy = y1;
  xxx = x2;
  yyy = y2;

  if (e.offsetX) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
  } else if (e.layerX) {
    mouseX = e.layerX;
    mouseY = e.layerY;
  }

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(xx, yy, xxx, yyy);
  Handler(e, mouseX, mouseY);
}

function Handler(e, val, val1) {
  var mouseX2, mouseY2, mouseY1, mouseX1;
  mouseX1 = val;
  
  mouseX2 = mouseX1 + 20;
  mouseY2 = mouseY2 + 20;
  mouseY1 = val1;
  document.getElementById("x").innerHTML = mouseX1;
  document.getElementById("y").innerHTML = mouseY1;
  F(e, mouseX1, mouseY1, mouseX2, mouseY2);
}

<canvas id="canvas" width="1350" height="400" style="background-color:#333" onmousemove="F(event)"></canvas>
<center>
  <p id="x"></p>
  <p id="y"></p>

Answer 2

一个函数调用另一个调用调用函数的函数。所有会发生的事情是你的浏览器会慢一点，然后你脚本抛出一个调用堆栈溢出错误。

如果没有提供从任何一个函数返回（退出）的方法，就不能让这两个函数相互调用。

你所做的就是下面。他们如何回归（退出）？

function A(){
   B(); // this never returns
}
function B(){
   A(); // this never returns
}
A();

由于我不确定你想要什么，我无法提供解决方案，但要删除其中一个电话

function A(){
   B(); // this returns
   // so now this can finnish,
}
function B(){
   // dont call first function
   // let it exit
}
A();

Answer 3

您应该将F功能的任务分开：

//mousemove = F(event)
//keep your code clear: F handle only the event
function F(e) {
//handle mouse positon and set vars
Rect(x1,y1,x2,y2)
}
function Rect(x1,y1,x2,y2)
{
//draw rectangle
//you don't need to call F function again: mouseover is still watching mouse position
}

在javascript中将许多变量传递给另一个函数

3 个答案: