Question

我正在寻找一种在ajax事件中获取对调用方按钮/链接的引用的方法。例如：

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();

 function reqListener () {
  console.log(this.responseText);
}

在reqListener函数中，获取按钮的id / class等。（我说的是isTrusted = true的情况）

在下面您可以找到加载事件，该事件在控制台中显示。唯一的参考是xhr对象本身：

Answer 1

我将为xhr调用创建一个处理程序，并引用其闭包中的按钮。这样的事情可能会有所帮助：（由于cors，get在代码段中不起作用）

document.getElementById('btn').addEventListener("click", handleClick);

function handleClick(e) {
  console.log('clicked')
  var oReq = new XMLHttpRequest();
  oReq.onload = console.log;//getReqListener(e.target);
  oReq.open("GET", "https://www.example.com/example.txt");
  oReq.send();

}

function getReqListener(target) {
  console.log('getreq')
  return function(data) {
    console.log('fetched');
    console.log(target.text)
    console.log(data)
  }
}

<button id="btn">click me</button>

Answer 2

除非按钮是封闭的，否则您将无法获得它，因为它不在范围内。

你基本上是在问

function foo(cb) {
  const btn = 'You can\'t get me!';
  cb();
}

foo(() => { /* How can I get the value of btn here? */ });

那不可能。

Answer 3

听起来像是在做不该做的事。

在这种情况下，除非可以访问执行XHR请求的代码，否则通常应使用一些（错误的）解决方法。

您可以考虑一些解决方法：

看看document.activeElement，希望链接/按钮不会很快失去焦点。
为所有a，input[type=button]，button onclick事件添加全局事件侦听器，并将最后单击的元素注册在根元素（网页中的window）上。这取决于您是否使用某些第三方库，并且您应该考虑在事件注册完成后将新元素添加到DOM的情况。

获取对ajax事件内单击按钮的引用

3 个答案: