uni-app input输入框组件点击事件冒泡被阻止

示例代码：

<template>  
    <view class="form">  
        <view class="form-item">  
            <input :v-model="value" disabled placeholder="点击显示下拉选项" @tap="clickInput" />  
        </view>  
        <view class="form-item" @tap="clickInput">  
            <input :v-model="value" disabled placeholder="点击显示下拉选项" />  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            value: '',  
            number: 0  
        };  
    },  
    methods: {  
        clickInput(){  
            this.number++;  
            uni.showToast({  
                title: '点击 '+this.number+' 次',  
                icon: 'none',  
                duration: 300  
            })  
        }  
    }  
};  
</script>  

<style lang="scss" scoped>  
.form {  
    margin-top: 100px;  
    padding: 0 15%;  
    .form-item {  
        padding: 6px 9px;  
        margin-top: 40px;  
        border: 1px solid #ccc;  
        border-radius: 5px;  
    }  
}  
</style>

操作步骤：

h5端vue页面, 两个input输入框组件都disabled禁用, 各自都有一个view父标签包裹, 一个点击事件注册在父标签上, 一个注册在input组件上

预期结果：

点击输入框应该触发点击事件, 点击父标签之外的区域不应该触发点击事件

实际结果：

冒泡被阻止, 点击输入框没有触发点击事件, 而且事件注册在父标签上的在点击父标签之外的区域触发了点击事件

bug描述：

最近几个月的版本的输入框是不是都阻止冒泡了啊, 之前注册在(disabled了的)input组件上或者父级标签上的点击事件, 点击输入框都能正常触发, 现在触发不了了, app正常, h5不行, 电脑和手机浏览器上都不行, 之前应该是没问题的, 就这两个月才有;

冒泡被阻止了, 想要点击输入框弹出下拉, 就只能用普通标签代替输入框, 还要和别的可输入的form-item统一样式, 有点麻烦, 而且那种既能输入又在聚焦的时候会弹出下拉选择的需求根本就实现不了了;

问题还没这么单纯, 如果事件是注册在输入框的父标签上, 点框内触发不了, 但是点它的周边一定范围内, 都已经在父标签之外了反而还能触发

信息类别	信息内容
产品分类	uniapp/H5
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	win11
HBuilderX类型	正式
HBuilderX版本号	3.98
浏览器平台	Chrome
浏览器版本	120.0.6099.71
项目创建方式	HBuilderX

录屏.zip

yibo5220 1楼•5 天前作者

可以设置input css pointer-events:none; 点击事件写到父元素上 <template>
<view class="index">
<view>
<input type=“text” placeholder=“请点击” class=“input” @click=“clicnFun” />
</view>

<view @click=“clicnFun” class=“view”>
<input type="text" placeholder="请点击" class="input" />
</view>
</view>
</template>

eggper 2楼•5 天前

这样可是可以, 不过如果既想不禁用输入框又想触发点击事件的话, 这样写直接就没法聚焦了, 禁用和不禁用得分成两套… 希望还是从源头解决一下吧

nodeper 3楼•5 天前

在 uni-app 中，input 输入框组件的点击事件默认是不会冒泡的。这是因为 input 元素本身的行为是获取焦点并弹出键盘，而不是触发点击事件。如果你希望在 input 组件上触发点击事件，并且希望这个事件能够冒泡到父组件，你可以通过以下几种方式来实现。

1. 使用 `@tap` 事件

uni-app 提供了 @tap 事件，它可以在 input 组件上触发点击事件，并且这个事件是可以冒泡的。

<template>
  <view @tap="handleParentClick">
    <input @tap="handleInputClick" placeholder="点击输入框" />
  </view>
</template>

<script>
export default {
  methods: {
    handleInputClick() {
      console.log('Input 被点击了');
    },
    handleParentClick() {
      console.log('父组件被点击了');
    }
  }
}
</script>

2. 使用 `[@click](/user/click)` 事件

虽然 input 元素的 [@click](/user/click) 事件默认不会冒泡，但你可以通过手动触发父组件的事件来实现类似的效果。

<template>
  <view [@click](/user/click)="handleParentClick">
    <input [@click](/user/click)="handleInputClick" placeholder="点击输入框" />
  </view>
</template>

<script>
export default {
  methods: {
    handleInputClick(event) {
      console.log('Input 被点击了');
      // 手动触发父组件的点击事件
      this.$emit('click', event);
    },
    handleParentClick() {
      console.log('父组件被点击了');
    }
  }
}
</script>

3. 使用 `@focus` 事件

如果你希望在 input 获取焦点时触发某些操作，可以使用 @focus 事件。

<template>
  <view [@click](/user/click)="handleParentClick">
    <input @focus="handleInputFocus" placeholder="点击输入框" />
  </view>
</template>

<script>
export default {
  methods: {
    handleInputFocus() {
      console.log('Input 获取焦点');
    },
    handleParentClick() {
      console.log('父组件被点击了');
    }
  }
}
</script>

4. 使用 `@confirm` 事件

如果你希望在用户按下回车键时触发事件，可以使用 @confirm 事件。

<template>
  <view [@click](/user/click)="handleParentClick">
    <input @confirm="handleInputConfirm" placeholder="点击输入框" />
  </view>
</template>

<script>
export default {
  methods: {
    handleInputConfirm() {
      console.log('用户按下了回车键');
    },
    handleParentClick() {
      console.log('父组件被点击了');
    }
  }
}
</script>