vue绑定父元素点击事件，点击不同子元素获取元素对象不同，元素绑定事件的坑

最新推荐文章于 2023-11-07 09:36:56 发布

Outlier9527

最新推荐文章于 2023-11-07 09:36:56 发布

阅读量1.4k

点赞数 2

分类专栏：前端知识文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/weixin_42334518/article/details/114626450

版权

前端知识专栏收录该内容

16 篇文章

订阅专栏

本文对比了原生点击事件与Vue事件绑定的区别，介绍了Vue中如何使用@符号绑定事件及通过$event获取事件对象的方法。并通过实例展示了如何区分点击的是哪个元素。

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

1、在开始讲vue绑定事件之前先回顾一下原生的点击事件的写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="./assets/jquery-2.2.1.min.js"></script>
		<style>
			#parent{
				height: 500px;
				width: 500px;
				background-color: #00F7DE;
			}
			#parent div{
				float: left;
				height: 100px;
				width: 100px;
				background-color: #01AAED;
				margin-left: 20px;
			}
				
		</style>
		<title></title>
	</head>
	<body>
		<div id="parent" onclick="get(this)">
			父元素
			<div id="son1">子元素1</div>
			<div id="son2">子元素2</div>
			<div id="son3">子元素3</div>
		</div>
		<script th:inline="javascript">
			function get(obj){
				console.log(obj);
			}
		</script>
	</body>
</html>

在这里插入图片描述
这时候不论点击是子元素还是父元素获取到的dom对象都是绑定点击事件的父元素，但是下面的vue绑定事件的方式就跟这个有很大的不一样了。

2、vue绑定事件的方式

<template>
    <div>
        <ul class="shadow" @click="goTo($event)"  :to="to" id="sqfw">
            <li><img :src="imageurl"/></li>
            <li class="message01">{{msg}}</li>
            <li class="message02">{{describe}}</li>
        </ul>
    </div>
</template>
methods: {
   goTo(e){
         console.log(e)
    }
  },