vue中div@click不起作用

最新推荐文章于 2025-06-04 19:46:09 发布

向上的时钟塔

最新推荐文章于 2025-06-04 19:46:09 发布

阅读量1.2w

点赞数 7

CC 4.0 BY-SA版权

文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/sinat_23336093/article/details/120181605

在Vue中，当外层div设置为position:relative且内部元素使用position:absolute时，点击事件可能无法正常工作。解决这个问题的方法包括：提高外层div的z-index或者使用@click.prevent来阻止事件冒泡。理解并正确使用Vue的事件修饰符如.stop和.prevent对于避免此类问题至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中div@click不起作用

前提，一个外层div，样式：position: relative;，设置了点击事件@click
里面用了position: absolute;绝对定位，之后点击就不起作用

目前已知两种解决方法
1、最外层div的z-index层级设置比里面绝对定位的大
2、用@click.prevent也是可以的

v-on的指令修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。