JavaScript dispatchEvent 未调度

Question

我在获取 dispatchEvent 时遇到问题上类。我正在尝试消除对 jQuery 的依赖，并且一直在对 native API 进行自己的小扩展，但我无法获取我的 trigger 版本使用 dispatchEvent 工作.

在控制台记录所有内容后，我知道 eventType正在传入，event正在创建对象，并且 this指的是正确的目标元素。这是我得到的代码，如果有任何帮助，我将不胜感激。

if (!EventTarget.prototype.trigger) {
    function triggerFunction(
        eventType) {
        const event = new CustomEvent(eventType, {
            bubbles: true,
            cancelable: true
        });

        this.dispatchEvent(event);
    }

    EventTarget.prototype.trigger = triggerFunction;
}

编辑

这是其余的代码。确实没什么，因为我主要专注于构建我的扩展。

if (!EventTarget.prototype.on) {
    function onFunction(
        eventType,
        targetElement,
        listener) {
        if (targetElement) {
            this.addEventListener(eventType, function (
                event) {
                const target = event.target;

                if (target
                    && target.nodeName !== targetElement) {
                    return;
                }

                listener.call(target, event);
            }, false);

            return this;
        }

        this.addEventListener(eventType, listener, false);

        return this;
    }

    EventTarget.prototype.on = onFunction;
}

const _pointerTap = "click";

const photosFunction = () => {
    const $buttonPhotosUpload = document.getElementById("button-photos-upload"),
        $fieldPhotosUpload = document.getElementById("field-photos-upload");

    const onButtonPhotosUploadTap = () => $fieldPhotosUpload.trigger(_pointerTap);

    $buttonPhotosUpload.on(_pointerTap, null, onButtonPhotosUploadTap);
};

document.getElementById("photos") && photosFunction();

和 HTML:

<div id="photos">
    <div>
        <button type="button" id="button-photos-upload">{UPLOAD}</button>
        <input type="file" id="field-photos-upload" accept="image/*" multiple />
    </div>
</div>

基本上，当按下按钮时，我想触发 input:file 的单击事件，这样我就可以用 CSS 直观地隐藏它。在我的 jQuery 版本中，这工作得很好。

Answer 1

问题是，浏览器不仅查看 Event 的 type 属性，还要求它继承正确的 Event 子类。

在这种情况下，他们想要的 Event 的一个子类是 MouseEvent，因此您必须执行 dispatchEvent(new CustomEvent('click')); 而不是 >dispatchEvent(new MouseEvent('click')).

(MCVE 借自 @CertainPerformance 答案)。

function triggerMouseFunction(eventType) {
  // here event must be MouseEvent for it to work on <input>
  const event = new MouseEvent(eventType, {
    bubbles: true,
    cancelable: true
  });
  this.dispatchEvent(event);
}
if (!EventTarget.prototype.triggerMouse) {
  EventTarget.prototype.triggerMouse = triggerMouseFunction;
}

const button = document.querySelector('button');
const input = document.querySelector('input');
button.addEventListener('click', () => {
  input.triggerMouse('click'); // Works
});

<div>
  <button type="button">{UPLOAD}</button>
  <input type="file">
</div>

但是，如果您真正想要的只是触发点击事件，那么无论如何只需使用 HTMLElement.click() 。

不需要任何lib，也不需要修改EventTarget的原型(prototype)，这是一个非常糟糕的主意。

const button = document.querySelector('button');
const input = document.querySelector('input');
button.addEventListener('click', () => {
  input.click(); // Works
});

<div>
  <button type="button">{UPLOAD}</button>
  <input type="file">
</div>