click事件阻止冒泡传递了$event参数在uni-app安卓端编译不通过

click事件阻止冒泡传递了$event参数在uni-app安卓端编译不通过

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

win10

HBuilderX类型：

正式

HBuilderX版本号：

4.75

手机系统：

Android

手机系统版本号：

Android 12

手机厂商：

OPPO

手机机型：

pgem10

页面类型：

vue

vue版本：

vue3

打包方式：

云端

项目创建方式：

HBuilderX

示例代码：

<view [@click](/user/click)="reduce(index,good_index,item.cid,good,$event)"  
    class="quantity-image">  
    <image v-if="good.quantity>0" class="quantity-image"  
        src="/static/tab/jianhao.png" mode="widthFix">  
    </image>  
</view>  

...

const reduce = (index : number, good_index : number, cid : string, good : GoodQuery, event : UniPointerEvent) => {  
    console.log(event);  
    const { quantity, src, dishes_name, unitprice, unit, _id } = good  
    let QU = quantity - 1  
    if (QU <= -1) {  
        QU = 0  
    }  
    goods.value[index].good_query[good_index].quantity = QU  

    const arr : cart_item = { src, dishes_name, unitprice, quantity: QU, unit, total_price: unitprice * QU, _id, cid, good_index }  

    shopping_cart_fn(arr)  
}

操作步骤：

<view [@click](/user/click)="reduce(index,good_index,item.cid,good,$event)"  
    class="quantity-image">  
    <image v-if="good.quantity>0" class="quantity-image"  
        src="/static/tab/jianhao.png" mode="widthFix">  
    </image>  
</view>  

...

const reduce = (index : number, good_index : number, cid : string, good : GoodQuery, event : UniPointerEvent) => {  
    console.log(event);  
    const { quantity, src, dishes_name, unitprice, unit, _id } = good  
    let QU = quantity - 1  
    if (QU <= -1) {  
        QU = 0  
    }  
    goods.value[index].good_query[good_index].quantity = QU  

    const arr : cart_item = { src, dishes_name, unitprice, quantity: QU, unit, total_price: unitprice * QU, _id, cid, good_index }  

    shopping_cart_fn(arr)  
}

预期结果：

$p_event是UniPointerEvent

实际结果：

$p_event为any，安卓端编译不通过，无法阻止冒泡

<view [@click](/user/click)="reduce(index,good_index,item.cid,good,$event)"  
    class="quantity-image">  
    <image v-if="good.quantity>0" class="quantity-image"  
        src="/static/tab/jianhao.png" mode="widthFix">  
    </image>  
</view>  

...

const reduce = (index : number, good_index : number, cid : string, good : GoodQuery, event : UniPointerEvent) => {  
    console.log(event);  
    const { quantity, src, dishes_name, unitprice, unit, _id } = good  
    let QU = quantity - 1  
    if (QU <= -1) {  
        QU = 0  
    }  
    goods.value[index].good_query[good_index].quantity = QU  

    const arr : cart_item = { src, dishes_name, unitprice, quantity: QU, unit, total_price: unitprice * QU, _id, cid, good_index }  

    shopping_cart_fn(arr)  
}

20:25:50.626 [plugin:uni:app-uts] 编译失败
20:25:50.626 error: 类型不匹配: 推断类型是Any，但预期的是UniPointerEvent。
20:25:50.627 at pages/home_page/home_page.uvue:48:67
20:25:50.627 46 |
20:25:50.627 47 |           <view class="quantity">
20:25:50.627 48 |            <view [@click](/user/click).stop="reduce(index,good_index,item.cid,good,$event"
20:25:50.627    |                                                                     ^
20:25:50.627 49 |             class="quantity-image">
20:25:50.627 50 |             <!-- <image v-if="good.quantity>0" [@click](/user/click)="reduce(index,good_index,item.cid,good)"⁠

更多关于click事件阻止冒泡传递了$event参数在uni-app安卓端编译不通过的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

参考一下这个：https://doc.dcloud.net.cn/uni-app-x/tutorial/codegap.html#function-event-argument-type给 $evet 加一个 as UniPointerEvent 试试

更多关于click事件阻止冒泡传递了$event参数在uni-app安卓端编译不通过的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢，已经解决问题

在uni-app中，使用Vue3语法时，事件参数的类型推断确实存在一些差异。问题在于$event在模板中传递时被推断为any类型，而函数参数声明为UniPointerEvent导致类型不匹配。

解决方案是修改函数参数类型声明，使用Event或any类型：

const reduce = (index: number, good_index: number, cid: string, good: GoodQuery, event: Event) => {
    event.stopPropagation()
    // 其他业务逻辑
}

或者使用类型断言：

const reduce = (index: number, good_index: number, cid: string, good: GoodQuery, event: any) => {
    (event as UniPointerEvent).stopPropagation()
    // 其他业务逻辑
}

对于阻止冒泡，建议直接在模板中使用事件修饰符：

<view [@click](/user/click).stop="reduce(index, good_index, item.cid, good)" 
      class="quantity-image">
回到顶部