<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>
2***@qq.com
- 发布：2023-12-07 20:14
- 更新：2023-12-07 23:56
- 阅读：373
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win11
HBuilderX类型： 正式
HBuilderX版本号： 3.98
浏览器平台： Chrome
浏览器版本： 120.0.6099.71
项目创建方式： HBuilderX
示例代码：
操作步骤：
h5端vue页面, 两个input输入框组件都disabled禁用, 各自都有一个view父标签包裹, 一个点击事件注册在父标签上, 一个注册在input组件上
h5端vue页面, 两个input输入框组件都disabled禁用, 各自都有一个view父标签包裹, 一个点击事件注册在父标签上, 一个注册在input组件上
预期结果：
点击输入框应该触发点击事件, 点击父标签之外的区域不应该触发点击事件
点击输入框应该触发点击事件, 点击父标签之外的区域不应该触发点击事件
实际结果：
冒泡被阻止, 点击输入框没有触发点击事件, 而且事件注册在父标签上的在点击父标签之外的区域触发了点击事件
冒泡被阻止, 点击输入框没有触发点击事件, 而且事件注册在父标签上的在点击父标签之外的区域触发了点击事件
bug描述：
最近几个月的版本的输入框是不是都阻止冒泡了啊, 之前注册在(disabled了的)input组件上或者父级标签上的点击事件, 点击输入框都能正常触发, 现在触发不了了, app正常, h5不行, 电脑和手机浏览器上都不行, 之前应该是没问题的, 就这两个月才有;
冒泡被阻止了, 想要点击输入框弹出下拉, 就只能用普通标签代替输入框, 还要和别的可输入的form-item统一样式, 有点麻烦, 而且那种既能输入又在聚焦的时候会弹出下拉选择的需求根本就实现不了了;
问题还没这么单纯, 如果事件是注册在输入框的父标签上, 点框内触发不了, 但是点它的周边一定范围内, 都已经在父标签之外了反而还能触发
喜欢技术的前端 - QQ---445849201
可以设置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>
<script>
export default {
methods: {
clicnFun(){
console.log('11')
}
}
}
</script>
<style scoped lang="scss">
.input{
border: 1px solid #ddd;
padding: 20rpx;
pointer-events:none;
}
.view{
padding: 20rpx;
margin-top: 30rpx;
}
</style>
2***@qq.com (作者)
这样可是可以, 不过如果既想不禁用输入框又想触发点击事件的话, 这样写直接就没法聚焦了, 禁用和不禁用得分成两套... 希望还是从源头解决一下吧
2023-12-08 09:32