如何 return 来自 addEventListener 的值

Question

我使用 Javascript 来捕获 x 和 y 用户单击 link 时的位置。

我可以让它工作，但我希望它在调用时将 return 的两个值设为 function init()。

我该怎么做？

<script type="text/javascript">

  document.addEventListener("DOMContentLoaded", init, false);

  function init()
  {
    var canvas = document.getElementById("canvas");
    canvas.addEventListener("mousedown", getPosition, false);
    
    // how can I get the return values here?

  }

  function getPosition(event)
  {
    var x = new Number();
    var y = new Number();
    var canvas = document.getElementById("canvas");

    if (event.x != undefined && event.y != undefined)
    {
      x = event.x;
      y = event.y;
    }
    else
    {
      x = event.clientX + document.body.scrollLeft +
          document.documentElement.scrollLeft;
      y = event.clientY + document.body.scrollTop +
          document.documentElement.scrollTop;
    }

    x -= canvas.offsetLeft;
    y -= canvas.offsetTop;

    alert("x: " + x + "  y: " + y); // here can print the correct position
    
    // if I add the two values here, and return them. How can I receive the values in funciton init()
    // var clickPosition={"x":x, "y":y};
    // return clickPosition;
  }

</script>

Answer 1

你不能。

JavaScript 无法进行时间旅行。

事件处理函数不会运行直到事件发生。到那时，调用 addEventHandler 的函数将完成运行ning 并返回。

事件处理函数需要自己处理数据，或者调用其他函数来处理。数据要往前走，不能往回走。

Answer 2

你有评论的地方，你将永远无法访问变量，事件还没有发生。

相反，您可以将一个匿名函数传递给事件处理程序，调用您的方法，其中 returns 一个值并适当地使用它

function init()
{
    var canvas = document.getElementById("canvas");
    canvas.addEventListener("mousedown", function(event){
        var result = getPosition(event);

        // result is your return value
    }, false);

}

Answer 3

这里有另一种方法...

在脚本代码之上初始化一个变量

<script type="text/javascript">
var paramVal1= null;
var paramVal2 = null;
  document.addEventListener("DOMContentLoaded", init, false);

  function init()
  {
    var canvas = document.getElementById("canvas");
    canvas.addEventListener("mousedown", getPosition, false);

return {x: paramVal1, y: paramVar2};

  }

  function getPosition(event)
  {
    var x = new Number();
    var y = new Number();
    var canvas = document.getElementById("canvas");

    if (event.x != undefined && event.y != undefined)
    {
      x = event.x;
      y = event.y;
    }
    else
    {
      x = event.clientX + document.body.scrollLeft +
          document.documentElement.scrollLeft;
      y = event.clientY + document.body.scrollTop +
          document.documentElement.scrollTop;
    }

    x -= canvas.offsetLeft;
    y -= canvas.offsetTop;

paramVal1 = x;
paramVal2 = y;

    alert("x: " + x + "  y: " + y); // here can print the correct position

    // if I add the two values here, and return them. How can I receive the values in funciton init()
    // var clickPosition={"x":x, "y":y};
    // return clickPosition;
  }

</script>

Answer 4

事件侦听器 return 默认情况下什么都没有，但是您可以以巧妙的方式从它们中获取数据。

这篇MDN article描述了3种方法：

使用“this”将数据导入事件侦听器
使用外部作用域将数据导入事件监听器属性
使用对象将数据传入和传出事件侦听器

如何 return 来自 addEventListener 的值

How to return value from addEventListener

javascript

getelementbyid

addeventlistener