英文:
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 item
if (btn.tagName === "A") {
return;
}
if (parent.classList.contains(this.toggleClass)) {
this.closeItem(btn, content, parent);
} else {
// Close all other open accordion items
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)
}
}
},
答案1
得分: 0
我解决了这个问题。我向 span 添加了
pointer-events: none;
现在一切都正常。
英文:
I figured this out. I added
pointer-events: none;
to the span and now all is good.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论