javascript - 如何重写自定义 html 元素的 onclick 事件，以便它仅在我要求时调度？

Question

这也是我在使用 oninput 和 onchange 时遇到的问题。

在下面的示例中，我希望仅在单击内部按钮时才能触发自定义元素的 onclick。

https://jsfiddle.net/xk5w95gf/

class TestElm extends HTMLElement {
    constructor() {
        super();
        this._value = null
        this._box
        this._button
    }

    connectedCallback(){

        this._box = document.createElement("div")
        this._button = document.createElement("button")
        this._box.style.height = "200px"
        this._box.style.background = "green"
        this._button.innerHTML = "Only clicking this should trigger the outside onclick"
        this.appendChild(this._box)
        this._box.appendChild(this._button)

        this._button.onclick = () => this.dispatchEvent(new MouseEvent("click", {
          bubbles: true,
          cancelable: true
        }))
    }
}

customElements.define('test-elm', TestElm);

现在，任何 onclick 都会触发 onclick，单击按钮会触发两次

<test-elm id="myelm" onclick="console.log('clicked button')"></test-elm>

Answer 1

我只需停止嵌套元素的传播，在上面的情况下，我只需将其添加到 _box 元素中:

this._box.onclick = (event) => event.stopPropagation()