Vanilla JS-单击元素后执行代码

Question

是否可以在通过'myElement.click（）'单击元素后触发回调函数？当我环顾四周时，所有解决方案都与jQuery相关，或与addEventListener结合使用，如下所示：

myElement.addEventListener('click', function() {});

我将尽力解释我的情况，以便使事情变得清楚

我有一个第三方插件，当您单击按钮时，它会将'lat'和'lon'值写入文本字段。该按钮非常丑陋，我想用自己的样式按钮替换它。

所以我要做的是用CSS隐藏该第三方按钮（'display：none'）。然后，我创建了一个新的“十字准线”按钮：

  // Make a crosshairs button
  var crosshairs = document.createElement('i');
  crosshairs.id = 'crosshairs';
  crosshairs.className += 'Filter-crosshairs fas fa-crosshairs';
  crosshairs.title = 'Laad mijn huidige locatie';

然后，对于该第三方按钮的每次出现，我都会在其之前放置自己创建的按钮：

      for (var i = 0; i < currentLocationButtons.length; i++) {
        // Put my button before the (hidden) third party button
        var currentLocationButtonParent = currentLocationButtons[i].parentNode;
        currentLocationButtonParent.insertBefore(crosshairs, currentLocationButtons[i]);
...
      }

现在，对于每个单击的“筛选器十字准线”按钮，该点击应传递给该隐藏按钮。此“ for”循环进入先前的“ for”循环：

for (var i = 0; i < currentLocationButtons.length; i++) {
    currentLocationButtons[i].click();
}

所以这是我的问题：我无法制作一个回调函数，该函数要等到第三方插件将'lat'和'lon'值设置到文本字段中。如果我继续在“ click（）”下进行编码，则必须先按两次按钮，然后按钮才能起作用（用户友好度= 0以下）。

有人知道如何进行回叫吗？谢谢！

Answer 1

所以这是我的问题：我无法创建一个回调函数，该函数要等到第三方插件将'lat'和'lon'值设置到文本字段中。

考虑使用延迟事件监听器（类似于JQuery的.on）：

document.addEventListener('click', function(event){
    // check some criteria that the target is the one you actually want
    if(event.target.className === 'someClass'){
        // do something here

    }
});

这样，事件侦听器将附加到文档，并且不需要您的实际目标出现在页面上。

nb。您还可以手动调度事件，但如果您需要支持较旧的IE，则可以使用YMMV调度（尽管为此提供了多线程）：

yourElement.dispatchEvent(new Event('click'));