uni-app中的事件对象 e

清疚 2023-02-15 13:45 18阅读 0赞

我们先把事件绑定在<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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 1][]

**现象：**

事件绑定到父级上，点击子元素时，会触发事件冒泡，就是先触发子元素的事件（如果子元素也绑定事件的话），最后触发父元素事件。

看下事件对象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：点击的哪一个元素距离页面最顶点的距离。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200605215243690.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200605183955723.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70