我可以保护自定义事件免受 "preventDefault" 的影响吗？

Question

我们有一个呈现用户对话框的 Stencil Web 组件。它由一个“outerComponent”和一个“innerComponent”组成。外层负责处理浏览器（道具、从 cookie 加载内容等），内层呈现实际 HTML 并让用户操作它。

（实际上内部使用了更多组件，来自 UI 组件的不同项目，例如复选框、按钮等。但我认为这与这里无关。）

当在 <inner-component> 中单击复选框、按钮等时，将调用组件内的 onclick-handler 来执行一些 UI 逻辑（例如设置“选中” 属性 ) 然后发出自定义事件，例如：

@Event() checkboxToggleModalEvent: EventEmitter<OptionType>;
...

<checkbox-comp fid="...">
  <input type="checkbox" checked={optionCheckbox.userSelection} onClick={this.handleCheckbox} />
  ...
</checkbox-comp>
...

private handleCheckbox(event: Event) {
    const checkboxElement: HTMLInputElement = event.target as HTMLInputElement;
    ...
    const selection: OptionType = { name: indexId, userSelection };

    this.checkboxToggleModalEvent.emit(selection);
}

现在，在 <outer-component> 中侦听此事件并且处理程序关心“技术”逻辑：

    @Listen("checkboxToggleModalEvent")
    checkboxToggleModalEventHandler(event) {
        LogService.log.debug(event);

        ... some technical logic
    }

这在大多数情况下都可以正常工作。现在我们在一个站点上进行了集成，事件显然没有正确发出或在中间以某种方式丢失。 UI 逻辑正常执行，但永远不会调用 outerComponent 中的处理程序。

我能够从集成库中找到导致问题的代码片段（抱歉粘贴了整个函数！）：

// From the imported library on customer website:
function(t, exports) {
    try {
        var e = new window.CustomEvent("test");
        if (e.preventDefault(),
        !0 !== e.defaultPrevented)
            throw new Error("Could not prevent default")
    } catch (t) {
        var n = function(t, e) {
            var n, r;
            return e = e || {
                bubbles: !1,
                cancelable: !1,
                detail: void 0
            },
            n = document.createEvent("CustomEvent"),
            n.initCustomEvent(t, e.bubbles, e.cancelable, e.detail),
            r = n.preventDefault,
            n.preventDefault = function() {
                r.call(this);
                try {
                    Object.defineProperty(this, "defaultPrevented", {
                        get: function() {
                            return !0
                        }
                    })
                } catch (t) {
                    this.defaultPrevented = !0
                }
            }
            ,
            n
        };
        n.prototype = window.Event.prototype,
        window.CustomEvent = n
    }
}

如果我删除它，一切都会按预期进行。

现在，我想知道我们是否可以以某种方式“保护”我们的事件不被这样拦截，因为该组件在任何情况下都应该真正起作用（这就是我们选择这项技术的原因）。

但我也非常感谢任何可能导致问题的提示。

非常感谢！！

Answer 1

  n.prototype = window.Event.prototype,
  window.CustomEvent = n

看起来他们 超载了 CustomEvent 并注入了他们自己的代码。

这是使用第三方软件的缺点。

在这种情况下，解决此问题的唯一方法是 早点进入，并让自己超载 CustomEvent。

但是您随后面临着让他们的代码工作的挑战；因为他们这样做是有原因的。

什么是第 3 方软件？公开羞辱他们。

想尝试重载的朋友请尽早执行：

window.customeElements.define = () => {}

我可以保护自定义事件免受 "preventDefault" 的影响吗？

Can I protect custom events from "preventDefault"?

javascript

events

web-component

typescript

stenciljs