uni-app touchend事件第一次点击不会触发

uni-app touchend事件第一次点击不会触发

项目创建方式 CLI版本号
CLI 4.0.8

产品分类：uniapp/H5

PC开发环境操作系统：Windows

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

浏览器平台：Chrome

浏览器版本：124.0.6367.91

示例代码：

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

更多关于uni-app touchend事件第一次点击不会触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app touchend事件第一次点击不会触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，touchend 事件通常用于处理触摸结束的操作。如果你发现第一次点击时 touchend 事件没有触发，可能是以下几个原因导致的：

1. 事件绑定问题

确保 touchend 事件正确绑定到目标元素上。例如：

<view @touchend="handleTouchend">点击我</view>

methods: {
  handleTouchend(event) {
    console.log('touchend 事件触发', event);
  }
}

如果绑定不正确，事件可能不会触发。

2. 触摸事件与点击事件的冲突

在某些情况下，touchend 事件可能会与 click 事件冲突，尤其是在移动端。可以尝试同时监听 touchend 和 click 事件：

<view @touchend="handleTouchend" @click="handleClick">点击我</view>

methods: {
  handleTouchend(event) {
    console.log('touchend 事件触发', event);
  },
  handleClick(event) {
    console.log('click 事件触发', event);
  }
}

3. 触摸事件的默认行为

某些元素（如 input 或 button）可能有默认的触摸行为，可能会影响 touchend 事件的触发。可以尝试阻止默认行为：

handleTouchend(event) {
  event.preventDefault();
  console.log('touchend 事件触发', event);
}

4. 事件冒泡与捕获

确保事件没有被子元素阻止冒泡。可以使用 @touchend.stop 来阻止事件冒泡：

<view @touchend.stop="handleTouchend">点击我</view>

5. 首次加载延迟

如果是在页面首次加载时 touchend 事件没有触发，可能是因为页面渲染未完成或 JavaScript 逻辑未初始化。可以尝试在 mounted 生命周期钩子中延迟绑定事件：

mounted() {
  setTimeout(() => {
    this.$refs.myView.addEventListener('touchend', this.handleTouchend);
  }, 100);
}
回到顶部