英文:
Vue Allow Parent's Click Event to be Triggered on Child
问题
我有一个手风琴元素，通过按钮触发。按钮内有一些文本和一个带有 + 的 span。当点击按钮上的文本时，我的手风琴会按预期切换，但当点击带有 + 的 span 时，我会收到一个错误，并且手风琴不会切换。添加 stop.prevent 可以解决js错误，但当点击加号时什么都不会发生，而我需要它发生。
我的问题是，无论我在按钮内的何处点击，我如何允许手风琴相应地切换？
相关代码：
<ul class="accordion js-accordion">@{int i = 0;}@foreach (var item in Model.FaqEntries){<li @(i == 0 && Model.ExpandFirstItem ? "data-open='true'" : "") id="@item.Name"><button type="button" v-on:click="handleToggleClick" v-on:keydown.enter="handleToggleClick">@item.Title<span v-on:click.stop.prevent>+</span></button><div class="rich-text">@Html.Raw(@item.Content)</div></li>i++;}</ul>
VUE
handleToggleClick: function (event) {if ((this.isMobileOnly && breakpoint() !== "large") || !this.isMobileOnly) {const btn = event.target;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)}}},
英文:
I have an accordion element that is triggered by a button. Inside the button I have some text and a span with a +. When clicking the text on the button my accordion toggles as expected, but when clicking the span with the + I get an error and the accordion doesn't toggle. Adding stop.prevent helps with the js error, but nothing happens when clicking the plus which I need it to do.
My question is how can I allow for the accordion to toggle accordingly no matter where inside the button I am clicking?
Relevant code:
<ul class="accordion js-accordion">@{int i = 0;}@foreach (var item in Model.FaqEntries){<li @(i == 0 && Model.ExpandFirstItem ? "data-open='true'" : "") id="@item.Name"><button type="button" v-on:click="handleToggleClick" v-on:keydown.enter="handleToggleClick">@item.Title<span v-on:click.stop.prevent>+</span></button><div class="rich-text">@Html.Raw(@item.Content)</div></li>i++;}</ul>
VUE
handleToggleClick: function (event) {if ((this.isMobileOnly && breakpoint() !== "large") || !this.isMobileOnly) {const btn = event.target;const content = btn.nextElementSibling;const parent = btn.parentElement;// If the accordion title is a link or header, don't open/close the accordion itemif (btn.tagName === "A") {return;}if (parent.classList.contains(this.toggleClass)) {this.closeItem(btn, content, parent);} else {// Close all other open accordion itemsArray.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)}}},
答案1
得分: 0
我解决了这个问题。我向 span 添加了
pointer-events: none;
现在一切都正常。
英文:
I figured this out. I added
pointer-events: none;
to the span and now all is good.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论