自定义元素未获取onclick [英] onclick not picked up by custom element

问题描述

我正在定义自定义元素

  customElements.define（ my-button，类扩展HTMLButtonElement {
 onclick （）{
 console.log（ bar）; 
} 
}，{扩展名： button}）
  

编辑2：

进一步的发现，从原型中省略时，定义了一个处理程序。

  customElements.define（ my-button，类扩展了HTMLButtonElement { 
 Constructor（）{
 super（）; 
 this.onclick =（）=> console.log（ bar）; 
} 
}， {扩展名：按钮}）
  

但是当原型包含 onclick ，该处理程序不再起作用

  customElements.define（ my-button，类扩展了HTMLButtonElement {
 onclick （）{
 console.log（ bar）; 
} 
 
 Constructor（）{
 super（）; 
 this.onclick = （）=> console.log（ bar）; 
} 
}，{扩展名： button}） 
  

如果我们能够对此现象做出解释，我将非常高兴。

编辑3：

如果有人遇到相同的问题，我想出了一个解决方法。可能值得注意的是，只有实例化类的直接原型中定义的处理程序才会被附加，这对性能有好处，但逻辑上可能有缺陷。

  //仅在基类
 Constructor（）{
 super（ ）; 
 
用于（让Object.getOwnPropertyNames（this.constructor.prototype）的道具）{
 if（prop.indexOf（ on）=== 0）{
 this.addEventListener（prop.substring（2）.toLowerCase（），this.constructor.prototype [prop]）; 
} 
} 
} 
  

我仍然非常有兴趣了解

解决方案

问题是您需要定义click的侦听器...而不是onClick函数

 类CustomButton扩展了HTMLButtonElement {
 constructor（）{
 super（）; 
 
 this.addEventListener（'click'，（）=> {
 console.log（'clicked'）; 
}）; 
} 
} 
 
 customElements.define（自定义按钮，CustomButton，{扩展名：按钮}）; 
  

html

 <按钮是=自定义按钮> 
嗨
< / button> 
  

I'm defining a custom element

customElements.define("my-button", class extends HTMLButtonElement {
  onclick() {
    console.log("bar");
  }
}, { extends: "button" })

https://jsfiddle.net/tuxkjp3q/

But when I click it nothing happens.

Why is that and how can I attach event handlers to each instance of the class without overriding the constructor?

Edit:

When I inspect the DOM object there is an onclick handler, but it's not functioning. This is confusing

Edit 2:

Further findings, when omitted from the prototype, defining a handler works

customElements.define("my-button", class extends HTMLButtonElement {
  constructor() {
    super();
    this.onclick = () => console.log("bar");
  }
}, { extends: "button" })

But when the prototype contains onclick, the same handler no longer functions

customElements.define("my-button", class extends HTMLButtonElement {
  onclick() {
    console.log("bar");
  }

  constructor() {
    super();
    this.onclick = () => console.log("bar");
  }
}, { extends: "button" })

I would be really happy if we can get an explanation of this phenomenon.

EDIT 3:

I've come up with a work around, if anyone faces the same problem. It's probably worth noting that only handlers defined in the direct prototype of the instantiated class will get attached, which is good for performance but probably flawed logic. Anyhow it could be tuned to your requirements.

// Only in the base class
constructor() {
  super();

  for (let prop of Object.getOwnPropertyNames(this.constructor.prototype)) {
    if (prop.indexOf("on") === 0) {
      this.addEventListener(prop.substring(2).toLowerCase(), this.constructor.prototype[prop]);
    }
  }
}

I am still very interested in learning the reason for this.

解决方案

The problem is you need to define the listener of click... not the function onClick

class CustomButton extends HTMLButtonElement  {
  constructor() {
    super();

    this.addEventListener('click', () => {
      console.log('clicked');
    });
  }
}

customElements.define('custom-button', CustomButton, { extends: "button" });

html

<button is="custom-button">
  Hi
</button>

这篇关于自定义元素未获取onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！