vue 中使用 event.target.value 踩坑

最新推荐文章于 2023-08-09 11:35:52 发布

pnpnpna

最新推荐文章于 2023-08-09 11:35:52 发布

阅读量4.4k

点赞数 3

文章标签： vue javascript

本文链接：https://blog.csdn.net/siriurr/article/details/124331998

版权

问题

原本是要用三个按钮显示后端获取的数据，点击按钮可以得到对应的值。但是发现点击按钮有时有值，有时是 undefined。

代码如下：

<el-row>
   <el-button @click.native="chooseVal" :value="cone">{{ cone }}</el-button>
   <el-button @click.native="chooseVal" :value="ctwo">{{ ctwo }}</el-button>
   <el-button @click.native="chooseVal" :value="cthree">{{ cthree }}</el-button>
</el-row>

chooseVal: function (event) {
        console.log("target: " + event.target.value);
    }

原因

DOM 事件流分为 3 个阶段：事件捕获阶段、目标阶段、冒泡阶段。
target 在事件流的目标阶段，currentTarget 在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target 指向被单击的对象而 currentTarget 指向当前事件活动的对象 (注册该事件的对象)。

因此，当点击到 button 时，是可以获取到值的，而当点击到 button 内显示的数字时，得到的是 undefned。改为 currentTarget 后，不论是点击 button 还是数字，指向的都是 button。

button
console