LitElement点击功能执行两次

问题描述

我有两个成分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被触发了两次。谁能告诉我为什么会这样吗？

解决方法

我非常确定，这是因为有两个单击事件：按钮中的本机事件（冒泡的事件）和您手动分派的事件。尝试使用具有不同名称的自定义事件，或尝试从sdk-button中删除调度并使用本机事件。