找不到非jQuery等效的“触发器”

Question

Tigran Saluev建议使用以下答案来手动触发选择文件的提示，但是代码使用jQuery。 他的代码如下：

var input = $(document.createElement("input"));
input.attr("type", "file");
input.trigger("click");

在我的项目中，我想要等效的效果，但没有jQuery。 我以为我在这里：

var input = document.createElement("input");
input.setAttribute("type", "file");
input.dispatchEvent(new Event("click"));

但是什么也没发生。 我做错了什么？

Answer 1

在您的情况下，只需一个简单的click（）调用即可触发事件。 或者，如果要使用调度事件，则要创建一个鼠标事件并触发它。

 var fi = document.querySelector("#f"); // simple call to click() document.querySelector("button.test1").addEventListener("click", function() { f.click() }); // Or with dispatch event document.querySelector("button.test2").addEventListener("click", function() { var event = new MouseEvent('click', { view: window, bubbles: true, cancelable: true }); fi.dispatchEvent(event); }); 

 <input id="f" type="file" /> <button class="test1" type="button"> CLICK ME 1</button> <button class="test2" type="button"> CLICK ME 2</button> 

Answer 2

您可以使用initMouseEvent作为trigger的替代方法

这是指向 api的链接，以获取更多详细信息

function clickSimulation(id) {
   var theEvent;
   var theElement = document.getElementById(id);
   if (document.createEvent) {
      theEvent = document.createEvent("MouseEvents");
      theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
   }
   (theEvent) ? theElement.dispatchEvent(theEvent) : (theElement.click && theElement.click());
}

var input = $(document.createElement("input"));
input.attr("type", "file");
input.attr("id", "TheFileCatcher");

clickSimulation("TheFileCatcher");

Answer 3

我认为您只是缺少一个事件监听器。 尝试以下构造：

// Create an input object
var input = $(document.createElement("input"));
input.attr("type", "file");

// Add an event listener
input.addEventListener("click", function(e) {
  console.log(e.detail);
});

// Create the event
var event = new CustomEvent("click", { "detail": "My click event" });

// Dispatch/Trigger/Fire the event
input.dispatchEvent(event);

您还可以尝试使用一种事件类型进行“播放”，因此可以click Custom（自定义）来代替CustomEvent ，尝试使用与在代码中相同的方法。 我认为问题是因为您缺少事件监听器

参考原始答案

编辑找到有关安全性限制的信息，用于以编程方式触发文件输入

为了安全起见，当输入字段未收到直接单击（或键盘）事件时，大多数浏览器都会阻止提交文件。 某些浏览器（例如Google Chrome）仅阻止单击事件，而Internet Explorer则不提交通过程序触发的文件输入字段选择的任何文件。 到目前为止，Firefox 4（及更高版本）是唯一完全支持调用“ click”-完全隐藏（显示：无）文件输入字段中的事件的浏览器。