鼠标悬停事件 Lit-Element/Polymer答案

【问题标题】：Mouse-Over event Lit-Element/Polymer鼠标悬停事件 Lit-Element/Polymer
【发布时间】：2019-03-12 22:06:28
【问题描述】：

有没有办法在 Lit-Element/Polymer 中创建自定义事件，例如鼠标悬停事件？我一直在寻找这个，但我似乎可以找到一种方法。我知道 Lit-Element 中的事件，例如 @click，但对鼠标悬停事件一无所知。

【问题讨论】：

标签： javascript polymer web-component polymer-3.x lit-element

【解决方案1】：

这可以使用 lit-html @event 绑定来完成。

对于mouseover 事件类型，使用@mouseover="${this.handleMouseover}"

有关 lit-element 事件侦听器的详细信息，请参阅 https://lit-element.polymer-project.org/guide/events

实例：

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<script type="module">
  import { LitElement, html, css } from 'https://unpkg.com/lit-element/lit-element.js?module';
  
  class MyElement extends LitElement {
    static get styles() {
      return [
        css`
          span {
            padding: 4px 8px;
            border: 2px solid orange;
          }
        `
      ];
    }
    
    render() {
      return html`
        <span
          @mouseover="${this.handleEvent}"
          @mouseleave="${this.handleEvent}">
          Hover me
        </span>
      `;
    }
    
    handleEvent(e) {
      console.log(`Event type: ${e.type}`);
    }
  }
  customElements.define('my-element', MyElement);
</script>
<my-element></my-element>

【讨论】：

【解决方案2】：

所以我只是想通了，如果有人有同样的困难，就在这里发帖。

你必须使用CustomEvents，这里有一些代码示例：

在元素的 firstUpdate 方法中，您应该添加一个新的 EventListener

firstUpdated(){
    this.addEventListener('mouseover', this.mouseOverHandler);
}

并声明方法

   mouseOverHandler(){
       console.log('Hello');
}

就这么简单！！！

【讨论】：