如何从addEventListener返回值

How to return value from addEventListener

本文关键字：返回值 addEventListener      更新时间：2023-09-26

当用户单击链接时，我使用Javascript来捕捉x和y的位置。

我可以让它工作，但我希望它在被调用时将这两个值返回给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>

如果您有注释，您将永远无法访问变量，事件尚未发生。

相反，您可以做的是将一个匿名函数传递给事件处理程序，调用返回值的方法，并将其用作适当的

function init()
{
    var canvas = document.getElementById("canvas");
    canvas.addEventListener("mousedown", function(event){
        var result = getPosition(event);
        // result is your return value
    }, false);
}

你不能。

JavaScript不能进行时间旅行。

在事件发生之前，事件处理程序函数不会运行。到那时，调用addEventHandler的函数将完成运行并返回。

事件处理程序函数需要处理数据本身，或者调用其他函数来处理。数据必须向前移动，不能向后移动。

这里有另一种方法。。。

在脚本代码上初始化变量

<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>

默认情况下，事件侦听器不返回任何内容，但您可以通过巧妙的方式从中获取数据。

这篇MDN文章描述了3种方法：

  1. 使用"；这个"
  2. 使用外部作用域属性将数据获取到事件侦听器
  3. 使用对象将数据进出事件侦听器
相关文章：