1***@qq.com
1***@qq.com
  • 发布:2024-05-06 18:24
  • 更新:2024-05-06 18:24
  • 阅读:30

【报Bug】touchend事件第一次点击不会触发

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

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

浏览器平台: Chrome

浏览器版本: 124.0.6367.91

项目创建方式: CLI

CLI版本号: 4.0.8

示例代码:

<template>
<view class="login-page">
<view class="title">密码登录</view>
<view class="form">
<view class="form-item">
<view class="form-item-label">账号</view>
<view class="form-item-inout-box">
<input
class="form-item-input"
placeholder="请输入账号/手机号/邮箱"
placeholder-style="color: rgba(35, 44, 59, 0.5)"
/>
<view class="help-text">请输入账号/手机号/邮箱</view>
</view>
</view>

  <view class="form-item">  
    <view class="form-item-label">密码</view>  
    <view class="form-item-inout-box">  
      <input  
        class="form-item-input"  
        placeholder="请输入密码"  
        placeholder-style="color: rgba(35, 44, 59, 0.5)"  
        :type="passwordShow ? 'text' : 'password'"  
      />  
      <view class="help-text">请输入密码</view>  
    </view>  
    <view  
      @touchstart="handleChangePasswordShow($event, true)"  
      @touchend="handleChangePasswordShow($event, false)"  
    >  
      <image  
        class="password-visible"  
        mode="aspectFit"  
        :src="passwordShow ? iconShow : iconHidden"  
        @touchcancel="handleChangePasswordShow($event, false)"  
      />  
    </view>  
  </view>  
</view>  

</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import iconShow from './assets/password-show.svg';
import iconHidden from './assets/password-hidden.svg';

const passwordShow = ref(false);
function handleChangePasswordShow(event: Event, show: boolean) {
passwordShow.value = show;
event.preventDefault();
event.stopPropagation();
}
</script>

<style scoped lang="scss">
.login-page {
padding: 74px 30px 0;
width: calc(100vw - 60px);
min-height: 100vh;
background: #fff;

.title {
line-height: 24px;
font-size: 24px;
font-weight: 600;
color: #232c3b;
}

.form {
margin-top: 20px;

.form-item {  
  padding: 15px 0;  
  margin-bottom: 10px;  
  display: flex;  
  align-items: flex-start;  
  border-bottom: 1px solid #e5e5e5;  

  .form-item-label {  
    margin-right: 12px;  
    font-size: 16px;  
    line-height: 24px;  
    color: #86909c;  
  }  

  .form-item-inout-box {  
    flex: auto;  

    .form-item-input {  
      font-size: 16px;  
      color: rgba(35, 44, 59, 0.5);  
    }  

    .help-text {  
      font-size: 12px;  
      line-height: 24px;  
      color: #ee0a24;  
    }  
  }  

  .password-visible {  
    margin: 2px 0 0 8px;  
    width: 20px;  
    height: 20px;  
  }  
}  

}
}
</style>

操作步骤:

点击密码输入后面的图标
第一次按下和抬起,只触发了touchstart,未触发touchend;
第二次按下和抬起,touchstart和touchend都触发了;
第三次按下和抬起,只触发了touchstart,未触发touchend;
第四次按下和抬起,touchstart和touchend都触发了;
......

预期结果:

每次按下和抬起,都应该触发touchstart和touchend事件

实际结果:

点击密码输入后面的图标
第一次按下和抬起,只触发了touchstart,未触发touchend;
第二次按下和抬起,touchstart和touchend都触发了;
第三次按下和抬起,只触发了touchstart,未触发touchend;
第四次按下和抬起,touchstart和touchend都触发了;
......

bug描述:

touchend事件第一次点击不会触发,第二次点击会触发,第三次不触发,依次类推

2024-05-06 18:24 负责人:无 分享
已邀请:

要回复问题请先登录注册