button 按钮点击执行两次按下动画

button 按钮点击执行两次按下动画

开发环境 版本号 项目创建方式
Windows 10 专业版 4.57 HBuilderX

示例代码：

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{title}}</text>
    </view>  
    <button>1111</button>  
  </view>  
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello'
    }
  },
  onLoad() {  
  },  
  methods: {  
  }  
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {  
  height: 200rpx;  
  width: 200rpx;  
  margin-top: 200rpx;  
  margin-left: auto;  
  margin-right: auto;  
  margin-bottom: 50rpx;  
}

.text-area {  
  display: flex;  
  justify-content: center;  
}

.title {  
  font-size: 36rpx;  
  color: #8f8f94;  
}
</style>

操作步骤：

运行就是

预期结果：

运行就是

实际结果：

运行就是

bug描述：

button 按钮在谷歌浏览器开发者，手机模式中，点击会有两次点击动画效果，button-hover class 会重复添加两次


2 回复

有一个已知的bug 跟你这个应该是一样的 参考问答：https://ask.dcloud.net.cn/question/205785


这个问题的原因是uni-app在开发模式下会同时触发touch和click事件，导致按钮动画重复执行。解决方法有以下几种：

  1. 最简单的方案是给button添加hover-stop-propagation属性：
<button hover-stop-propagation>1111</button>
  1. 或者使用CSS覆盖默认样式：
button::after {
  display: none;
}
  1. 也可以禁用hover效果：
<button :hover-class="none">1111</button>
回到顶部