uni-app中的事件对象 event
来源:blog.csdn.net 更新时间:2023-05-25 21:55
我们先把事件绑定在<view>上时，点击<button>按钮：
<template> <view class="content" @tap.stop="click($event)"> <button id="btn">click</button> </view> </template> <script> export default { methods: { click(e) { console.log('11', e) } } } </script> |
现象：
事件绑定到父级上，点击子元素时，会触发事件冒泡，就是先触发子元素的事件（如果子元素也绑定事件的话），最后触发父元素事件。
看下事件对象e里边的参数：
1、currentTarget：表示事件绑定到的那个元素 <view> ··· ··· </view>
它 里边包含：
（1）dataset - 标签上如果有data-xxx的话，传的值将会在dataset中
（2）id：“” - 该元素的id，没有的话为空字符串；
（3）offsetLeft：0 - 该元素的左端距离页面左边的距离；
（4）offsetTop：0 - 该元素的顶端距离页面顶部的距离；
2、detail - x：点击时，点击的那个位置距离页面左边的距离；
detail - y：点击时，点击的那个位置距离页面顶部的距离。
3、preventDefault ：阻止默认事件
4、stopPropagation：阻止事件冒泡
5、target : 表示当前点击的那一个元素 <button>
它里边包含：
（1）dataset - 没啥用！！！因为不管事件绑定到谁的身上，如果标签上有data-xxx的话，值一定会在currentTarget中的dataset里出现。
（2）id：‘btn’点击的那个元素的id；
（3）offsetLeft ： 0 点击的元素左边距页面最左边的距离；
（4）offsetTop：0 点击的元素的上顶端距页面最顶端的距离；
（5）x：点击的那一个点距离页面左边的距离；
（6）y：点击的哪一个元素距离页面最顶点的距离。
上一篇：css 文字纵向 水平居中 下一篇：vue语法 `${ }` （模版字符串）