Javascript 材料设计web MDCTab:激活选项卡后未发出交互事件

我在用这个

创建选项卡栏的步骤

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

<div class="mdc-tab-bar" role="tablist">
    <div class="mdc-tab-scroller">
        <div class="mdc-tab-scroller__scroll-area">
            <div class="mdc-tab-scroller__scroll-content">

                <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">title</span>
                        <span class="mdc-tab__text-label">Name</span>
                    </span>
                    <span class="mdc-tab-indicator mdc-tab-indicator--active">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>
                <button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">style</span>
                        <span class="mdc-tab__text-label">Tags</span>
                    </span>
                    <span class="mdc-tab-indicator">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>
                <button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
                        <span class="mdc-tab__text-label">Status</span>
                    </span>
                    <span class="mdc-tab-indicator">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>
                <button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">warning</span>
                        <span class="mdc-tab__text-label">Restriction</span>
                    </span>
                    <span class="mdc-tab-indicator">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>
                <button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">keyboard_arrow_right</span>
                        <span class="mdc-tab__text-label">Other</span>
                    </span>
                    <span class="mdc-tab-indicator">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>

            </div>
        </div>
    </div>
</div>

调用click（通过代码或使用鼠标手动）工作，并发出事件和警报“1”。然而，我更愿意使用

activateTab

函数，但它只使选项卡处于活动状态，而不发出事件

---

有人知道这里出了什么问题吗？

选项卡激活之前会发出

MDCTab:interactivated

事件，这就是为什么在使用

activateTab

方法时不会触发该事件的原因

MDCTab:interactived

实际上被用于知道要激活哪个选项卡。根据您的最终目标，您可以使用

mdctabar:activated

事件来获得所需，因为它将由

activateTab

方法触发，并在事件详细信息数据中提供激活选项卡的索引

const tabBar=mdc.tabBar.mdctabar.attachTo（document.querySelector（'.mdc tabBar'）；
const tabs=document.querySelectorAll（'.mdc tab'）；
tabBar.listen（'MDCTabBar:activated'，函数（事件）{
let tab=tabs[event.detail.index]；
console.log（tab.children[0]。children[1]。textContent，“tab已激活”）；
});
tabBar.activateTab（3）；//激活“限制”选项卡

材质选项卡示例
标题
名称
风格
标签
最喜欢的
地位
警告
限制规定
键盘箭头右键
另外

    const tabBar = mdc.tabBar.MDCTabBar.attachTo(document.querySelector('.mdc-tab-bar'));
    tabBar.listen('MDCTab:interacted', function (event) {
        alert(1);
    });
    document.querySelectorAll('.mdc-tab-bar button')[3].click();
    //tabBar.activateTab(3);