Question

我有一个带有两个窗格的应用程序-课程列表，以及一个课程窗格，当单击列表中的课程（或按Enter键）时，该课程窗格会滑动打开。课程窗格中有一个关闭按钮，可以单击该按钮，也可以按Enter键以关闭该窗格。关闭课程窗格后，我试图将重点重新放在课程列表中的原始课程上。

这是我的按钮：

<button type="button" class="close float-right" aria-label="Close" v-on:click.stop="closeCourse($event)">
    <icon class="fa-md" :icon="['far', 'window-close']" />
</button>

以及提交时调用的方法...

closeCourse(event) {
    this.isExpanded = false;
    this.$eventBus.$emit("closeCourse");
    event.stopPropagation();
    event.preventDefault();
    $('#course-' + this.course.crn).focus();
 },

最后，这是单击/提交关闭按钮后要关注的元素的简化版本（为了方便阅读，我删除了不相关的属性）：

<tr 
    :id="'course-' + course.crn"
    tabindex="0"
    v-for="(course, index) in sortedCourses"
    v-on:click="showCourse(course.id, course.crn, $event)"
    @keyup.enter="showCourse(course.id, course.crn, $event)"
    >

当前行为是窗格将关闭，焦点将按预期移动到该行，然后关闭窗格的键盘事件似乎仍在继续-它通过调用@ keyup.enter函数重新打开课程。 / p>

我认为.stop和各种event.preventDefault（）和event.stopPropagation（）可以阻止事件冒泡到另一个元素。不确定如何处理。

Vue-键盘事件导致重新聚焦后触发多个事件处理程序

0 个答案: