Question

我的主页上有一个FAB按钮，单击该FAB按钮会显示另外三个按钮。加载页面后，这三个按钮将被隐藏，而我已经使用CSS选择器完成了此操作，

fab-main#fab-button + div{
  visibility: hidden;
}
fab-main#fab-button:hover + div{
  visibility: visible;
  animation: scale-in 0.5s;
}

我正在尝试为HTML中的FAB元素注册addEventListener。请注意，我正在使用自定义元素

 class testSample extends HTMLElement {
        constructor() {
            super();
            this.addEventListener("click", () => {
                this.openPage();
            });
        }
}

window.onload = function () {
    window.customElements.define("fab-main", testSample);
}

HTML代码是

  <fab-main class='fab fas fa-comment-dots' id="fab-button"></fab-main>

    <div class="home-expand">
        <div class="home-expand-item">
            <fab-main class='fab fas fa-comment-dots'></fab-main>
        </div>
        <div class="home-expand-item">
            <fab-main class='fab fas fa-comment-dots'></fab-main>
        </div>
        <div class="home-expand-item">
            <fab-main class='fab fas fa-comment-dots'></fab-main>
        </div>
    </div>

我的问题：

单击事件不适用于最初设置为隐藏的FAB按钮。我可以看到可见的按钮的click事件，但其他三个按钮却没有。

注意：：我正在尝试在window.onload中注册侦听器。

页面加载时隐藏的元素的addEventListener

0 个答案: