uni-app 微信小程序pc端 input输入框外部容器监听@tap时 点击input输入框外部容器tap事件未触发

uni-app 微信小程序pc端 input输入框外部容器监听@tap时 点击input输入框外部容器tap事件未触发

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

操作步骤：

在微信小程序pc端，input 为只读状态， input输入框外部容器监听@tap时，点击input输入框

预期结果：

容器的tap事件会触发

实际结果：

容器的tap时间没有触发

bug描述：

在微信小程序pc端， input输入框外部容器监听@tap时，点击input输入框外部容器的tap事件没有触发到；在手机端可正常触发事件


更多关于uni-app 微信小程序pc端 input输入框外部容器监听@tap时 点击input输入框外部容器tap事件未触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

用click替代试试，click是点击，tap是触摸

更多关于uni-app 微信小程序pc端 input输入框外部容器监听@tap时 点击input输入框外部容器tap事件未触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，如果你在微信小程序 PC 端使用 input 输入框，并且希望在点击输入框外部容器时触发 @tap 事件，但发现 @tap 事件未触发，可能是由于以下原因：

1. 事件冒泡问题

微信小程序的 PC 端和移动端的事件处理机制可能有所不同。input 输入框可能会阻止事件冒泡，导致外部的 @tap 事件无法触发。

2. 事件绑定问题

确保你已经正确地在外部容器上绑定了 @tap 事件。

解决方案

1. 使用 [@click](/user/click) 替代 @tap

在 PC 端，@tap 事件可能不如 [@click](/user/click) 事件可靠。你可以尝试使用 [@click](/user/click) 事件。

<view [@click](/user/click)="handleClick">
  <input placeholder="请输入内容" />
</view>

methods: {
  handleClick() {
    console.log('外部容器被点击');
  }
}

2. 使用 catchtap 或 catchclick 阻止事件冒泡

如果你希望确保事件能够冒泡到外部容器，可以使用 catchtap 或 catchclick。

<view [@click](/user/click)="handleClick">
  <input placeholder="请输入内容" catchtap="handleInputTap" />
</view>

methods: {
  handleClick() {
    console.log('外部容器被点击');
  },
  handleInputTap() {
    console.log('输入框被点击');
  }
}

3. 使用 @blur 事件

如果你希望在用户离开输入框时触发某些操作，可以使用 @blur 事件。

<view [@click](/user/click)="handleClick">
  <input placeholder="请输入内容" @blur="handleInputBlur" />
</view>

methods: {
  handleClick() {
    console.log('外部容器被点击');
  },
  handleInputBlur() {
    console.log('输入框失去焦点');
  }
}
回到顶部