我可以从“预防违规”中保护自定义事件。

Question

我们有一个模具Web组件，可渲染用户对话框。它由“外部组件”和“ InnerComponent”组成。 外部一个人关心处理浏览器（道具，cookie中的装载物等），而内部则呈现实际的HTML，并让用户对其进行操作。

（实际上，内部使用了更多组件，从一个UI组件（例如复选框，按钮等）的不同项目中使用。但是我认为这在这里不相关。）

当复选框，按钮等单击＆lt;内部组件＆gt;在组件中的一个单击处理程序被称为执行某些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);
}

现在，在＆lt; outer--中组件＆gt;此事件会被聆听，并且处理程序关心的是“技术”逻辑：

    @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自己。

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

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

对于那些想尝试过载的人，请尽早执行：

window.customeelements.define =（）=＆gt; {}