vue 点击事件获取当前元素

在 Vue 中，你可以通过 `@click` 或 `v-on:click` 绑定一个点击事件，并通过 `$event.target` 来获取当前被点击的元素。例如：

<template>
  <div @click="handleClick">
    <button>按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event.target); // 输出点击的元素，这里为 <button> 按钮
    }
  }
}
</script>

在上面的例子中，我们绑定了一个点击事件到 `<div>` 元素上，当点击 `<button>` 按钮时，`handleClick` 方法会被调用，并且会将该点击事件作为参数传递进来。在方法中，我们可以通过 `$event.target` 来获取当前被点击的元素，即 `<button>` 按钮。

相关问题

vue3如何获取当前点击的元素

Vue3可以利用事件监听器(@click等)以及事件对象来获取当前点击的元素。可以在事件处理函数中通过`event.target`或`event.currentTarget`来获取当前点击的元素，具体代码如下：

<template>
  <div @click="handleClick">
    <p>Click me!</p>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const currentElem = ref(null)

    function handleClick(event) {
      currentElem.value = event.target // 获取当前点击的元素
    }

    return {
      currentElem,
      handleClick
    }
  }
}
</script>

在上述代码中，我们通过`currentElem`这个ref来存储当前点击的元素，然后在`handleClick`这个事件处理函数中，通过`event.target`来获取当前点击的元素，并将其赋值给`currentElem.value`。这样就可以在Vue3中获取当前点击的元素了。

vue@click获取当前dom元素的下一个元素

可以使用Vue中的$refs来获取当前dom元素，然后使用原生JavaScript中的nextSibling属性来获取下一个元素。代码如下：

HTML：

<div ref="myDiv"></div>
<div></div>

Vue：

export default {
  methods: {
    getNextElement() {
      const myDiv = this.$refs.myDiv;
      const nextElement = myDiv.nextSibling;
      console.log(nextElement);
    }
  }
}

在上面的代码中，我们使用了Vue中的$refs来获取myDiv元素，然后使用nextSibling属性获取下一个元素，并将其打印出来。