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

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

操作步骤：

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

<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>

.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，以下是录屏效果

bug效果.zip

官方_bug_video.zip


更多关于uni-app button组件hover-class触发次数异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

16 回复

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

更多关于uni-app button组件hover-class触发次数异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的，视频附件上传了

试试移动端页面

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

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

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

回复 h***@163.com: 在你的浏览器上 试试 官方的模版项目中的buttonn有没有问题呢 https://hellouniapp.dcloud.net.cn/pages/component/button/button

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

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

经过我测试，我的最新版 google chrome 、手机上的 alook 浏览器运行官方示例项目，button 表现都正常。
但是电脑上使用 edge 模拟手机的确会闪烁两次，使用隐私模式是两次，我进一步排查一下，不排除是部分浏览器的问题。
你也补充一下你具体测试的浏览器。

我刚把Edge更新到133.0.3065.82 (正式版本) (64 位)后就出现了 闪烁的问题 我之前用的Edge版本是 122.0.2365.92 (正式版本) (64 位) 没出现闪烁问题 隐私模式也不会出现闪烁

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

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

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

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

这个问题是uni-app在H5端对移动端浏览器模拟点击事件的兼容性问题导致的。hover-class在移动端会同时响应touchstart和touchend事件，造成多次触发。

解决方案：

  1. 使用自定义处理替代hover-class：
<button 
  class="oprate-btn" 
  @touchstart="handleTouchStart" 
  @touchend="handleTouchEnd"
>xx</button>
  1. 在methods中添加处理逻辑：
methods: {
  handleTouchStart(e) {
    e.currentTarget.classList.add('oprate-btn-hover')
  },
  handleTouchEnd(e) {
    e.currentTarget.classList.remove('oprate-btn-hover')
  }
}
  1. 或者使用CSS媒体查询限制只在非触摸设备生效：
[@media](/user/media) (hover: hover) {
  .oprate-btn-hover:hover {
    background-color: #ff583320;
  }
}
回到顶部