vue keydown事件未在div上开火

发布于 2025-02-01 15:02:00 字数 556 浏览 0 评论 0原文

正如标题所说，我无法让我的活动开火。

@keydown="keyPressed($event)"

这就是目前的外观，但是我已经尝试了Tabindex并在Mount上附加使用：

mounted(){
        let container=document.querySelector('#course')
        container.addEventListener('keydown',(e)=>{
            console.log(e)
        })

    }

模板

<div id="course" tabindex="0" @keydown="keyPressed($event)"> 
  <div class="snake"></div>
</div>

因此，没有什么可用。我在做什么错？

原文

As the title says, I can't get my event to fire.

@keydown="keyPressed($event)"

This is how it looks currently,but I've tried it with tabIndex and appending in on mount like this :

mounted(){
        let container=document.querySelector('#course')
        container.addEventListener('keydown',(e)=>{
            console.log(e)
        })

    }

Template

<div id="course" tabindex="0" @keydown="keyPressed($event)"> 
  <div class="snake"></div>
</div>

Hence,nothing works. What am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

埋葬我深情 2025-02-08 15:02:00

我认为，在Vue中，更好的做法是使用ref而不是QuerySelector选择元素，尤其是在同一组件中可以引用的元素。

另外，使用@keydown只需将键入事件侦听器附加到元素，因此无需执行addeventListener。

Working example in vue

<script setup>
  import { onMounted } from 'vue';
  
  const courseDiv = $ref(null);
  
  const keyPressed = (e) => {
    console.log(e);
  }

</script>

<template>
  <div ref="courseDiv" id="course" tabindex="0" @keydown="keyPressed($event)"> 
    <div class="snake">snek</div>
  </div>
</template>

I think in vue, a better practice would be to select the element using ref instead of a querySelector especially if it can be referenced in the same component.

Also using @keydown just attaches a keydown event listener to the element, so there is no need to do addEventListener.

Working example in vue

<script setup>
  import { onMounted } from 'vue';
  
  const courseDiv = $ref(null);
  
  const keyPressed = (e) => {
    console.log(e);
  }

</script>

<template>
  <div ref="courseDiv" id="course" tabindex="0" @keydown="keyPressed($event)"> 
    <div class="snake">snek</div>
  </div>
</template>

回复收藏 0 原文

~没有更多了~