如何使用Polymer 2捕獲Firefox上webcomponent中的指針事件？

我已經構建了一個將指針事件偵聽器附加到DOM元素（here）的JavaScript庫。今天，我用它在聚合物1.9 Web組件來包裝它，使用PEP來填充工具在Firefox上指針的事件，並能正常工作：如何使用Polymer 2捕獲Firefox上webcomponent中的指針事件？

<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 });下寄存器，沒什麼特別的。

遷移到聚合物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和邊緣下正確處理，但在Firefox事件被卡在shadowRoot。如果我在this上收聽，我可以處理它們。 shadowRoot，但不在editorDomElement上。

我做錯了什麼，或者它是在Firefox上的聚合物2事件轉發問題？有沒有解決方法或解決方法，使其工作？謝謝

來源

2017-06-30 FXG

全聚合物1.9代碼： https://github.com/MyScript/myscript-common-element/blob/2.0.0-alpha1/myscript-common-element.html – FXG

在聚合物2.0中，events將停止並消失在煙霧陰影根部邊界。

如果你想使事件泄漏到shadowRoots外，您將需要通過組成屬性的dispatchEvent功能：

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

在這裏閱讀更多：Fire Custom Events (polymer-project.org)

來源

2017-07-02 20:14:25 user544262772

是的，我讀過，但我的問題是不派遣事件，它是捕捉它們，並且只有Firefox上的指針事件。對不起，如果不明確，我會更改主題名稱。 – FXG

如何使用Polymer 2捕獲Firefox上webcomponent中的指針事件？

回答

相關問題