uni-app创建的小程序项目live-player组件的点击无效

uni-app创建的小程序项目live-player组件的点击无效

示例代码：

<live-player  
    class="player"  
    :src=""  
    mode="RTC"  
    autoplay  
    auto-pause-if-navigate  
    auto-pause-if-open-native  
    min-cache="0.2"  
    max-cache="0.8"  
    object-fit="contain"  
    @click.stop="trialLiveClick1"
></live-player>

trialLiveClick1() {  
    console.log(123456789);  
}

操作步骤：

直接编译后，真机调试，使用纯血鸿蒙手机微信扫码，打开后点击窗口，打开开发调试查看打印数据，我使用的手机是华为mate 60pro 系统版本是harmonyOS 5.1.0版本

预期结果：

能正确打印数据

实际结果：

无数据打印

bug描述：

使用vue2开发的，live-player组件增加click事件，真机调试无效，并且点击事件没有向上冒泡，微信原生项目中使用是正常的


更多关于uni-app创建的小程序项目live-player组件的点击无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

28 回复

其他机型有问题吗？安卓，ios？hx升级到最新版本 4.76 试试还有没有问题

更多关于uni-app创建的小程序项目live-player组件的点击无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


刚才升级了，试了下，还是不行，麻烦帮忙看下

其他机型都是正常的，只有纯血鸿蒙有问题，测过了，ios和安卓都是正常

回复 z***@126.com: 那就不应该是uniapp的问题吧，你对比下安卓的编译产物和鸿蒙的编译产物是否一致，uniapp编译代码无关机型

回复 z***@126.com: 另外，你怎么写的原生微信小程序测试代码，和uniapp的代码一致吗？

回复 DCloud_UNI_JBB: 小程序测试代码<live-player id="player" src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" bindtap="bindtap123" /> 小程序的点击事件是bindtap，测试代码里面的js是这样的 bindtap123() { console.log(123) }

<live-player class="{{['player','player123456','data-v-126c3f90',leftData.playerBigClass]}}" src="{{leftData.rtmpBig||leftData.rtmpSmall}}" mode="RTC" autoplay="{{true}}" auto-pause-if-navigate="{{true}}" auto-pause-if-open-native="{{true}}" min-cache="0.2" max-cache="0.8" object-fit="contain" data-event-opts="{{[['tap',[['trialLiveClick1',['$event']]]],['statechange',[['onPlayStateChange',['$event']]]],['netstatus',[['onPlayNetStatus',['$event']]]]]}}" bindtap="e" bindstatechange="e" bindnetstatus="__e"></live-player> 这个是uniapp编译后的代码，

回复 z***@126.com: 两边测试代码都没有保持一致，uniapp加了阻止冒泡，原生又不加阻止冒泡

回复 DCloud_UNI_JBB: 但是点击事件是单独写了的，不生效的 @click.stop=“trialLiveClick1”

回复 z***@126.com: 看起来编译产物也没啥问题啊，有问题你安卓和ios就不会还能运行了

回复 z***@126.com: 那你先把uniapp写的代码翻译为一样的原生代码啊，都没有保持一致测了有啥用

这个是微信测试代码 <live-player id=“player1” src=“https://domain/pull_stream” mode=“RTC” autoplay @click=“trialLiveClick1” /> 放到我的工程中 unizpp编译后为 <live-player id="player1" src="https://domain/pull_stream" mode="RTC" autoplay="{{true}}" data-event-opts="{{[['tap',[['trialLiveClick1',['$event']]]]]}}" bindtap="__e" class="data-v-126c3f90"></live-player> 点击仍然没有打印出来

事件带 .stop 会编译为 catchXXX，你发的编译产物没有带

我发的编译产物里面把.stop去掉了，这个是微信测试代码 <live-player id="player1" src="https://domain/pull_stream" mode="RTC" autoplay bindtap="bindtap123" /> 放到我的工程中 只是把事件换成trialLiveClick1， unizpp编译后为 <live-player id="player1" src="https://domain/pull_stream" mode="RTC" autoplay="{{true}}" data-event-opts="{{[['tap',[['trialLiveClick1',['$event']]]]]}}" bindtap="__e" class="data-v-126c3f90"></live-player> 点击仍然没有打印出来

回复 z***@126.com: 测试代码的bindtap换成click，测试代码的事件bindtap123换成trialLiveClick1，测试代码和unizpp的代码只有这两个区别，纯血鸿蒙系统中没有打印事件，点击没有任何反应

回复 z***@126.com: 其他事件能正常触发吗

回复 DCloud_UNI_JBB: 只有live-player live-pusher组件的这个点击无法触发，其他组件目前来看都是正常的

我刚才试了下@tap的写法，也是一样的没反应

官方支持的其他事件，比如statechange

回复 DCloud_UNI_JBB: 正常的，可以正常打印

回复 DCloud_UNI_JBB: 感谢大佬的支持，我们公司要断网了，今天先排查到这里吧，明天继续？

回复 DCloud_UNI_JBB: 使用的微信测试代码 <live-player id="player" src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" bindtap="bindtap123" /> bindtap123() { console.log(123) } 纯血鸿蒙上测试，真机调试， 能够正常打印； uniapp代码：<live-player id=“player1” src=“https://domain/pull_stream” mode=“RTC” autoplay @statechange=“onPlayStateChange1” @click=“trialLiveClick1” /> js trialLiveClick1() { console.log(123456789); } 编译后微信开发者工具的编译代码为：<live-player id="player1" src="https://domain/pull_stream" mode="RTC" autoplay="{{true}}" data-event-opts="{{[['statechange',[['onPlayStateChange1',['$event']]]],['tap',[['trialLiveClick1',['$event']]]]]}}" bindstatechange="__e" bindtap="__e" class="data-v-126c3f90"> 点击的时候没反应，不能正常打印，其中live-player 支持的事件@statechange=“onPlayStateChange1” 是能够正常打印出数据，大佬帮忙再看下这个问题

回复 z***@126.com: 你试试在live-player外层套一个view能不能饶过这个问题

回复 DCloud_UNI_JBB: 目前我是这样解决这个问题的，可以解决，但是感觉还是编译有问题

回复 z***@126.com: 我现在手头没有鸿蒙设备，没办法真机调试，后面再排查下，你先饶过这个，别耽误开发

回复 DCloud_UNI_JBB: 对了，不是外层套了个view，单独套一个解决不了，套了一个之后，然后在live-player组件上层增加了一层view的遮罩解决的，通过点击view的遮罩这种处理方式处理的

回复 DCloud_UNI_JBB: 感谢大佬耐心解答

在 uni-app 中，live-player 组件确实存在点击事件响应问题，尤其是在部分真机环境。这通常与平台底层事件处理机制有关。以下是排查和解决方案：

  1. 检查事件绑定方式
    确认 [@click](/user/click).stop 是否被正确编译。在小程序端，事件修饰符（如 .stop）可能不被完全支持。建议改为原生事件绑定：

    <live-player [@click](/user/click)="trialLiveClick1" />

  2. 尝试使用 [@tap](/user/tap) 事件
    小程序环境中，click 事件可能存在兼容性问题，可替换为 [@tap](/user/tap)：

    <live-player [@tap](/user/tap)="trialLiveClick1" />

  3. 检查组件层级和样式
    确保 live-player 未被其他元素遮挡，且样式未设置 pointer-events: none。可临时增加宽高和背景色测试点击区域。

  4. 真机兼容性处理
    鸿蒙系统对小程序组件的支持可能存在差异。若其他事件（如 @statechange）可触发，则说明组件已渲染，需针对点击事件单独处理。可尝试包裹一层 <view> 并绑定事件：

    <view [@click](/user/click)="trialLiveClick1">
  <live-player />
</view>
回到顶部