Vue中实现按钮内任意区域触发父级点击事件完成手风琴切换

问题根源 #

点击按钮内的<span>时，event.target指向的是span元素而非外层button。此时btn.nextElementSibling找不到对应的内容区域，parent也变成了button而非li，直接导致逻辑报错。加上stop.prevent后，span的点击事件被阻止冒泡，button的点击事件根本触发不了，所以点"+"毫无反应。

解决方案 #

步骤1：移除span上的事件阻止代码

把<span v-on:click.stop.prevent>改成普通span，让点击事件能正常冒泡到外层button：

<span>+</span>

步骤2：修改Vue事件处理函数，获取正确的button元素

将event.target替换为event.currentTarget——currentTarget始终指向绑定事件的元素（也就是button），不管点击的是它内部的哪个子元素：

handleToggleClick: function (event) {
    if ((this.isMobileOnly && breakpoint() !== "large") || !this.isMobileOnly) {
        // 用currentTarget获取绑定事件的button，而非点击的子元素
        const btn = event.currentTarget;
        const content = btn.nextElementSibling;
        const parent = btn.parentElement;

        if (btn.tagName === "A") {
            return;
        }

        if (parent.classList.contains(this.toggleClass)) {
            this.closeItem(btn, content, parent);
        } else {
            Array.from(this.$el.querySelectorAll(`.${this.toggleClass}`)).map(item => {
                this.closeItem(item.querySelector(".accordion__header"), item.querySelector(".accordion__content"), item);
            });

            this.openItem(btn, content, parent);
            setTimeout(() => { scrollToElement(btn) }, this.animationDuration + 1);
        }
    }
},

这样不管点击按钮内的文本还是"+"号，都会触发button的点击事件，并且能拿到正确的button、content和parent元素，手风琴就能正常切换了。

内容的提问来源于stack exchange，提问作者elkefreed