如何覆蓋自定義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() 

Answer 2

繼承人工作的jsfiddle：https://jsfiddle.net/xk5w95gf/20/

console.clear() 

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) 


     /* 
      There is no need to dispatch a `click` event on `this` 
      because `this._button` is a descendant of `this`, the event bubbles up the DOM tree to `this` regardless 

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

     */ 



     /* Instead we can prevent subsequent `click` event listners from executing 
      IF `this._button` IS NOT the `event.target 

      Using `this.onclick = ` vs `addEventListener()` ensurs that it IS THE FIRST executing listener. 

      NOTE: a simple setter like `testElmNode.onclick = newVal` will overwrite this logic. 
       USE: `addEventListener()` while building your application 
     `*/ 
     this.onclick = (event) => { 
      if (event.target !== this._button) { 
      event.stopImmediatePropagation(); 
      event.preventDefault(); 
      event.returnValue = false; 


      console.log('Not the button though..'); 
      } 
     }; 
    } 
} 

customElements.define('test-elm', TestElm); 
const myelm = document.getElementById("myelm") 

myelm.addEventListener('click',() => console.log('clicked button'));