1

我已经构建了一个 javascript 库，它将指针事件侦听器附加到 DOM 元素（此处）。今天，我在 Polymer 1.9 Web 组件中使用它来包装它，使用PEP在 Firefox 上填充指针事件，它工作正常：

<link rel="import" href="./pepjs-import.html">
<link rel="import" href="./myscriptjs-import.html">

<dom-module id="myscript-common-element">
<template>
    <style></style>
    <div id="editorDomElement" class="ms-editor"></div>
</template>
<script>
    Polymer({
                is: 'myscript-common-element',
                properties: {},
                attached: function () {
                    this.editorDomElement = this.querySelector('#editorDomElement');
                    // Attach an editor to the DOM element and listen pointer events
                    this.editor = MyScript.register(this.editorDomElement, this.buildConfiguration(), this.buildCustomStyle());
                }
            }
    );
</script>

我只是elementDomElement.addEventListener('pointerdown', (e) => { // Some code });在注册下做，没什么特别的。

迁移到 Polymer 2 后，我有类似的东西：

<dom-module id="myscript-common-element">
<template>
    <style></style>
    <div id="editorDomElement" class="ms-editor"></div>
</template>
<script>
    class MyScriptCommonElement extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element) {

        static get is() {
            return 'myscript-common-element'
        }

        connectedCallback() {
            super.connectedCallback();
            this.editorDomElement = this.shadowRoot.querySelector('#editorDomElement');
            this.editor = MyScript.register(this.editorDomElement, this._buildConfiguration(), this._buildCustomStyle());
        }
    }
    customElements.define(MyScriptCommonElement.is, MyScriptCommonElement);
</script>

在 Chrome 和 Edge 下可以正确处理指针事件，但在 Firefox 中，事件会卡在 shadowRoot 上。如果我正在听this，例如 shadowRoot，我可以处理它们，但不能在editorDomElement.

我做错了什么还是 Firefox 上的 Polymer 2 事件转发有问题？是否有解决方案或解决方法使其工作？谢谢

4

1 回答 1

0

在 Polymer 2.0 中，events将在 shadowRoot 边界上停止并消失在烟雾中。

如果你想让事件泄漏到 shadowRoots 之外，你需要在 dispatchEvent 函数中传递组合属性：

this.dispatchEvent('my-event', { bubbles: true, composed: true });

在此处阅读更多内容：Fire Custom Events (polymer-project.org)

于 2017-07-02T20:14:25.130 回答