h***@163.com
h***@163.com
  • 发布:2025-02-20 14:14
  • 更新:2025-03-02 11:39
  • 阅读:272

button组件hover-class触发次数异常

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 4.36

浏览器平台: Edge

浏览器版本: 133.0.3065.69 (正式版本) (64 位)

项目创建方式: HBuilderX

操作步骤:

运行到EDGE浏览器,打开调试器,切换移动端模式
html:

<button hover-class="oprate-btn-hover" class="oprate-btn">xx</button>
<button hover-class="oprate-btn-hover" class="oprate-btn">xx</button>
<button hover-class="oprate-btn-hover" class="oprate-btn">xx</button>

scss:

    .oprate-btn {  
        width: 150rpx;  
        max-width: calc((100% - 100rpx) / 3);  
        min-width: 100rpx;  
        height: 60rpx;  
        line-height: 58rpx;  
        text-align: center;  
        color: #ff5833;  
        border-color: #ff5833;  
        background-color: transparent;  
        font-size: 28rpx;  
        margin: 0 0;  
        &::after {  
            display: none;  
        }  
    }  
    .oprate-btn-hover {  
        background-color: #ff583320;  
    }

预期结果:

运行到h5端点击触发一次hover-class

实际结果:

触发多次hover-class

bug描述:

button组件在运行到h5浏览器的移动端模式页面时hover-class单击后会连续触发两次,官方提供的网页代码也有如下bug,以下是录屏效果

2025-02-20 14:14 负责人:DCloud_UNI_OttoJi 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

是什么样的效果呢?能录屏看下嘛?我测试没发现有问题 换其他浏览器试试呢?
测试视频:https://mp-f31011df-efe5-4e43-a4b4-0bb25f1edafe.cdn.bspapp.com/屏幕录制2025-02-20 下午3.08.39.mp4

  • h***@163.com (作者)

    好的,视频附件上传了

    2025-02-20 15:33

  • h***@163.com (作者)

    试试移动端页面

    2025-02-20 15:33

  • 爱豆豆

    回复 h***@163.com: 就是移动端页面 我在真机上也测试了 没出现你这情况

    2025-02-20 15:54

  • 爱豆豆

    回复 爱豆豆: 你那边其他手机或者浏览器都会出现这个问题吗?

    2025-02-20 16:01

  • h***@163.com (作者)

    回复 爱豆豆: 只有移动端浏览器有这个问题,小程序没有,我也好奇啊,我昨天测试没问题的,昨天下午更新了一下编译器版本,今天h5按钮全变这样了,我现在把版本回退了,还是一样

    2025-02-20 16:14

  • 爱豆豆

    回复 h***@163.com: 在你的浏览器上 试试 官方的模版项目中的buttonn有没有问题呢

    https://hellouniapp.dcloud.net.cn/pages/component/button/button

    2025-02-20 16:30

  • h***@163.com (作者)

    回复 爱豆豆: 也有的,我这次把操作全录上

    2025-02-21 10:36

  • h***@163.com (作者)

    回复 爱豆豆: 只要是移动端模式下,单击就会闪两次

    2025-02-21 10:39

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

经过我测试,我的最新版 google chrome 、手机上的 alook 浏览器运行官方示例项目,button 表现都正常。

但是电脑上使用 edge 模拟手机的确会闪烁两次,使用隐私模式是两次,我进一步排查一下,不排除是部分浏览器的问题。

你也补充一下你具体测试的浏览器。

  • 爱豆豆

    我刚把Edge更新到133.0.3065.82 (正式版本) (64 位)后就出现了 闪烁的问题

    我之前用的Edge版本是 122.0.2365.92 (正式版本) (64 位) 没出现闪烁问题 隐私模式也不会出现闪烁

    2025-02-24 11:55

  • DCloud_UNI_OttoJi

    回复 爱豆豆: 对,我实际测试安卓手机,测试 edge 133 是正常的,我观察下这个问题。目前测试了安卓和 ios真机表现 都是正常的。

    2025-02-24 16:50

  • h***@163.com (作者)

    问题中提供了edge的浏览器版本信息,只有edge浏览器运行时有这个问题

    2025-02-25 09:59

YoungLean

YoungLean

目前谷歌浏览器也遇到了一样的问题,给view元素添加hover-stay-time之后,hover效果就会触发两次,如果只有hover-class则不会

  • DCloud_UNI_OttoJi

    不排除是 chrome 的 bug。我测试 chrome 131 是好的,chrome 133 是坏的,只会在 pc 浏览器上模拟移动端出现,真机测试移动端未复现。你是上面的测试方式吗?

    2025-03-03 11:10

要回复问题请先登录注册