Vue3中表格父元素@keypress事件未触发的问题咨询

核心原因 #

只有可获得焦点的元素（比如input、textarea、button，或者手动设置了tabindex的元素）才能触发键盘事件。div、table这类默认不可聚焦的元素，即使绑定了键盘事件，只要没获得焦点，浏览器就不会把键盘事件派发给它们。

你的问题拆解 #

1. 为什么父div的@keypress不生效？

   • 首先，div默认不可聚焦，点击表格行只会触发click事件，不会让div获得焦点，所以键盘事件根本不会传到div上。
   • 其次，@keypress事件本身不支持捕获方向键（ArrowUp/ArrowDown），这类按键只会触发keydown或keyup事件，这也是你绑定@keypress没反应的另一个关键原因。

2. 为什么body绑定监听器有效，且target显示body？
   当页面中没有任何可聚焦元素获得焦点时，键盘事件会沿着DOM树向上冒泡，最终到达body节点，所以给body绑定监听器能捕获到事件，此时event.target显示body是完全正常的。

3. 怎么让表格父容器能捕获键盘事件？
   给父div添加tabindex属性让它变成可聚焦元素，再在选中行时手动让它获得焦点：

   <!-- 给div加tabindex和ref -->
   <div @keydown="keyEvt($event)" tabindex="0" ref="keyContainer">
     <table>
       <tr v-for='(row,k) in pageRows()' :key="k" @click="selectRow(row,k)" @mouseover="redrawCss(row.id)" >
         <template v-for="(val,k) in row">
           <td :class="k">{{ val }}</td>
         </template>
       </tr>
     </table>
   </div>
   

   修改selectRow方法，让div获得焦点：

   selectRow: function(row, k) {
     // 原有业务逻辑...
     // 让父div获得焦点，确保键盘事件能被捕获
     this.$refs.keyContainer.focus();
   }
   

   这样点击表格行后，div会获得焦点，键盘事件（比如方向键）就会触发它绑定的keyEvt方法了。

额外提示 #

• 优先用@keydown或@keyup捕获方向键、功能键这类非打印字符，@keypress只适合处理可打印的字符输入。
• 设置tabindex后，元素可能会有默认的焦点边框，如果不需要可以用CSS去掉：outline: none;

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