uni-app 3.12更新后出现点击自定义组件e.target.dataset异常

uni-app 3.12更新后出现点击自定义组件e.target.dataset异常

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

<template>  
    <view @click="test" >  
        <test :clicked="clicked==='qqq'" data-type="qqq"></test>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                clicked:'qqq'  
            };  
        },  
        methods:{  
            test(e){  
                const{  
                    type,value  
                }=e.target.dataset  
                this.clicked=this.clicked==type?"":type  
                console.log(e.target.dataset)  
            }  
        }  
    }  
</script>  

<style lang="scss"></style>

<template>  
    <view class="test editor-icon" :class="clicked?`clicked icon-bold`:`icon-bold`" @click="click" @tap="click">  

    </view>  
</template>  

<script>  
    export default {  
        props: {  
            clicked: Boolean  
        },  
        data() {  
            return {};  
        },  
        methods:{  
            click(e){  
                console.log(e.target.dataset)  
                this.$emit('click',e)  
            }  
        }  
    }  
</script>  

<style lang="scss">  
    @import "../sve-icon/editor-icon.css";  
    .test {  
        background-color: #fff000;  
        width: 100rpx;  
        height: 100rpx;  
    }  

    .clicked {  
        background-color: #000000;  
    }  
</style>

操作步骤：

  • 运行代码示例，点击色块

预期结果：

21:38:37.516 [object] {"type":"qqq5"}   at components/test/test.vue:17  
21:38:38.531 [object] {"type":"qqq5"}   at pages/test/test.vue:17

实际结果：

21:38:37.516 [object] {"type":"qqq5"}   at components/test/test.vue:17  
21:38:38.531 [object] {}   at pages/test/test.vue:17

bug描述：

自定义了一个组件，组件内有click事件处理函数，在父级层定义个click事件，点击触发后该自定义组件后，e.target.dataset就变成空对象了


更多关于uni-app 3.12更新后出现点击自定义组件e.target.dataset异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

问题确认，已加分，即将修复

更多关于uni-app 3.12更新后出现点击自定义组件e.target.dataset异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问你们修复到哪里了？ 我3.1.22还是一样有问题

回复 8***@qq.com: 你遇到的问题可能只是相近，并非相同，请具体描述一下

HBuilderX 3.1.3 alpha 已修复

这是一个在uni-app 3.12版本更新后出现的dataset传递问题。问题出在事件冒泡过程中dataset数据丢失。

主要原因：

  1. 在uni-app 3.12版本中，事件冒泡机制有所调整
  2. 子组件触发的事件在冒泡到父组件时，event对象的target会指向实际点击的DOM元素
  3. 但dataset属性在冒泡过程中没有正确保留

解决方案：

  1. 直接在子组件中通过$emit传递需要的dataset数据：
// 子组件中
click(e){
    this.$emit('click', {
        ...e,
        dataset: e.target.dataset
    })
}
  1. 或者在父组件中通过currentTarget获取数据：
// 父组件中
test(e){
    const {type} = e.currentTarget.dataset
    // 使用currentTarget而不是target
}
回到顶部