LitElement 点击函数被执行了两次

Question

我有两个组件 sdk-button 和一个 upper-component

在我的 sdk-button 中，我有以下简单代码：

public render() {
    return html`
    <button  @click=${this._handleClick}>${this.text}</button>

`;
}

_handleClick() {
    let click = new Event('click');
    this.dispatchEvent(click);
}

这会调度一个点击事件，所以在我的 upper-component 中我有以下代码：

public render() {
    return html`
  <h1>Hello, ${this.test}!</h1>
  <sdk-button   @click="${() => { this.changeProperty() }}" text="Click"></sdk-button>
`;
}

changeProperty() {
    let randomString = Math.floor(Math.random() * 100).toString();
    console.log(randomString)
}

这有效，但是 changeProperty 被触发了两次。谁能告诉我为什么会这样？

Answer 1

我很确定那是因为有两个点击事件：一个是来自按钮的原生点击事件，另一个是您手动发送的点击事件。尝试使用具有不同名称的自定义事件或从 sdk-button 中删除调度并使用本机事件。

LitElement 点击函数被执行了两次

LitElement click function is executed twice

javascript

typescript

lit-element