Question

我创建了一个自定义的lit-component，它具有一个条件，如果条件为false，则应侦听并事件，如果条件为true，则在单击该元素后将其触发。创建该元素的拖曳之后，在触发事件后，将一个设置为true，将另一个设置为false，即使我正在冒泡该事件，将属性设置为false的那个也不会捕获到它。

我缺少什么来捕捉其他元素的事件？

在视图元素中，我用不同的道具两次调用了自定义元素：

isRoot属性正在确定元素是否正在触发或正在监听事件

<custom-element isRoot>Hello From Item</custom-element>
<custom-element>Hello From Item</custom-element>

custom-element.js：

class CustomElement extends LitElement {
  static get properties() {
    return {
        isRoot: { type: Boolean },
    }
  }

  static get styles() {
    return [
      css`
        span {
          width: 20px;
          display: inline-block;
          text-align: center;
          font-weight: bold;
        }
      `
    ];
  }

  render() {
    return html`
      <slot @click=${this.handleClick}></slot>
    `;
  }

  constructor() {
    super();
    this.isRoot = false;
    this.addEventListener("my-event", this.handleLoaded);
  }

  firstUpdated(changedProperties) {
  }

  handleLoaded(e){
    console.log("Listening")
    console.log(this.isRoot); 
    if(!this.isRoot){
        console.log(e.bubbles);
    }


  }

  handleClick(){
    if(this.isRoot){
        console.log("Fireing")
        let myEvent = new CustomEvent("my-event", { 
            detail: { message: 'my-event happened.' },
            bubbles: true, 
            composed: true });
          this.dispatchEvent(myEvent);
    }
  }
}

window.customElements.define('custom-element', CustomElement);

Answer 1

在这里，我试图说明您的代码作为工作示例。如果不适合您的需求，请发表评论，我们可以继续进行。

Demo

import { LitElement, html, css } from '@polymer/lit-element'; 



class CustomElement extends LitElement {
  static get properties() {
    return {
        isRoot: { type: Boolean }
    }
  }


  render() {
    return html`
      <slot @click="${this.handleClick}"></slot><span>${this.isRoot}</span>

    `;
  }

  constructor() {
    super();

    this.addEventListener("my-event", this.handleLoaded);
  }

  handleLoaded(e){

    console.log("Listening", this.isRoot,' Message: ')
    if(!this.isRoot){
        console.log(e);
    }


  }

  handleClick(e){
    console.log('clicked')
    if(this.isRoot){
        console.log("Fireing",'1---', this.isRoot)
        let myEvent = new CustomEvent("my-event", { 
            detail: { message: 'my-event happened.' }
           });
          this.dispatchEvent(myEvent);
    }
  }

}

window.customElements.define('custom-element', CustomElement);

如何从两个自定义元素中捕获自定义事件？

1 个答案: