uniapp @click点击事件在新版chrome浏览器点击没反应

最新推荐文章于 2024-05-10 10:52:05 发布
最新推荐文章于 2024-05-10 10:52:05 发布
阅读量791 收藏
点赞数
文章标签： uni-app chrome 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bittingCat/article/details/134125195
版权

问题描述

做项目时，有一个弹出选择的组件，怎么点都不出来，最开始还以为是业务逻辑限制了不能点击。后来才发现别人的电脑可以点出来，老版本的浏览器也可以点出来，最后定位到是新版的chrome就不行了在这里插入图片描述
这是我的浏览器版本，后面让同事也更新最新版，同事的也点不出来了

原因分析：

最后发现是view里面有个input，子元素里面有如果有input的话，父元素的click事件会失效
在这里插入图片描述
如果所示，view里面有u-input组件

解决方案：

把input去掉-换成普通的view去展示就可以正常点击出来了
在这里插入图片描述
这里把input换成了view

bittingCat
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue v-for循环之@click点击事件获取元素示例
10-16
今天小编就为大家分享一篇Vue v-for循环之@click点击事件获取元素示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Uniapp 微信小程序@click点击事件失效
qq_51574759的博客
08-26 1万+
我在一个页面上做了一个遮罩层，遮罩层上面绑定了点击事件，有一些能被点击，但是有一些还是失效了。层级遮盖的问题，但其实，就算遮罩层明显可见，遮罩在页面上方，当页面和遮罩层都默认保持同一个。，有时候虽然本地测试是好的，但是也不能保证在所有分辨率不同的屏幕上没有BUG。的时候，可能因为隐藏的遮盖效，而导致触发点击处被遮盖，导致无法点击。所以建议，当需要在遮罩层上设置点击事件的时候，不要偷懒，手动设定。因为遮罩层明显可见，所以我就没有考虑是。之类的方法，还有可能有一个错误。...
在uniapp中为自定义组件绑定点击事件点击后没有效果
weixin_38441229的博客
10-09 2625
在uniapp中为自定义组件绑定点击事件点击后没有效果
在uniapp中input 使用click事件有的手机不生效
最新发布
LJJONESEED的博客
05-10 293
【代码】在uniapp中input 使用click事件有的手机不生效。
Uniapp开发件微信小程序，自定义组件@click不起作用
过着你们羡慕不来的生活
11-26 3504
有的人说添加@click后面​ .native，我遇到的问题用这个方法并不行，最后解决办法是在自定义组件内把事件把点击事件传递出去。
@click失效？@click.native
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
09-21 2078
是因为使用.native之后父级组件可以像处理原生的DOM事件一样通过 v-on 监听子组件实例的任意事件(@即为v-on:的简写)，如果不加natvie，会认为监听的是来自子组件自定义的事件，然而子组件内也没有使用$emit()来将子组件的触发事件抛出，因此onSubmit()方法没有执行。newsbox是我自己封装的一个组件，问题就出在这儿，newsbox是子组件，想要直接在父组件触发click方法，直接写上@click是不能触发方法的。你可能想在某个组件的根元素上监听一个原生事件。
uniapp 真机调试 click点击事件无效
热门推荐
yangqii的博客
12-10 3万+
问题分析： （网络上普遍答案，但不能确定是否是这个原因导致） 移动端的主要问题是click会有200-300ms的延迟，主要原因是苹果手机在设计时，考虑到用户在浏览网页时需要放大，所以，在用户点击的300ms之后，才触发click，如果300ms之内还有click，就会进行放大缩小。 解决方法：（尝试该方法，但还是会出现点击事件无效。有可能是网络问题？？？） 使用 tap 替换 click...
【uni-app】 APP真机，子组件click&tap事件无效解决
weixin_46939955的博客
08-18 2279
uni-app，子组件绑定click&tap事件，点击无效
Uniapp｜爬坑之真机点击无效
爱玩的安哥
12-08 7945
uniapp开发时可能会遇到真机点击无反应的情况，本文提供了一种解决问题的思路
一个因@click.stop引发的bug的解决
10-17
开发者在项目中的菜单栏组件中使用了`<div class="main" @click.stop="isShowWhole = false">`，这里的`@click.stop`修饰符阻止了事件冒泡，可能导致Popover外部点击的事件判断无法正常触发。移除`stop`修饰符后，...
元素绑定click点击事件方法
09-03
当点击元素时，会发生 click 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。
vue click.stop阻止点击事件继续传播的方法
10-18
今天小编就为大家分享一篇vue click.stop阻止点击事件继续传播的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【uniapp】解决在H5谷歌浏览器下 u-input 标签 设置只读后,click事件不生效
一位前行者的博客
11-07 8847
导致外层的view上写的点击事件不再生效。后，u–input就不再拦截鼠标事件，外层的view上的点击事件就能够正常生效了。使u–input里写上readonly&disabled为true之后，在外层的view上写的点击事件生效。的作用是让元素实体 “虚化”，我们可以看到这个标签，但只是一个虚幻的影子而已，类似于海市蜃楼。：由于兼容性差异，nvue下需使用u–input，非nvue下需使用u-input。但是更换浏览器后就可以，打包app也是正常可以触发的，本来是没打算。的u-input元素会。
【uniapp】部分图标点击事件无反应
cc蒲公英的博客
11-23 992
【uniapp】部分图标点击事件无反应
uni-app点击事件@click、@tag不生效
weixin_45810581的博客
05-14 1万+
没有给上一个view里的textarea设置宽和高，图层被覆盖了，以至于点击不起作用
uni-app中 在自定义组件使用@click失效
nanfang_yinan的博客
02-27 7749
uni-app中 在自定义组件使用@click失效 问题描述 点击组件没有任何反应 解决办法 再@click后加上.native <song-list-index v-for="(songItem,songIndex) in songSheetData[index].songData" :data="songItem" @click.native="handleToSongListIndex" :key="songIndex"></song-list-index
uni-app踩坑集合(小程序)
weixin_44997513的博客
05-19 1866
1.指定页面不显示返回或首页按钮 onShow(){ uni.h }
解决uni在H5谷歌浏览器下 input 标签 设置 disabled 后,click事件不触发
2301_76742166的博客
08-25 2886
解决uni在H5谷歌浏览器下 input 标签 设置 disabled 后,click事件不触发
vue 表单验证 input 是 readonly 点击点击事件@click.native 选好后 v-model也赋值了 一直是红色的报错状态
qq_27806371的博客
07-20 306
vue 表单验证 input 是 readonly 点击点击事件@click.native 选好后 v-model也赋值了 一直是红色的报错状态 使用trigger: 'blur|change' 即可解决。
uniapp@click跳转带参例子
05-10
以下是一个uni-app中使用click跳转并带参数的例子： 1. 在需要跳转的页面的.vue文件中，定义一个方法来进行跳转并传递参数： ```javascript methods: { goDetail(item) { uni.navigateTo({ url: '/pages/detail/detail?id=' + item.id }) } } ``` 2. 在需要传递参数的页面（例如详情页）中，通过 `this.$route.query` 获取传递过来的参数： ```javascript export default { onLoad(options) { this.id = options.id; } } ``` 3. 在需要触发跳转的元素中（例如button），使用 `@click` 绑定定义好的跳转方法，并将需要传递的参数作为参数传递给该方法： ```html <template> <button @click="goDetail(item)">跳转到详情页</button> </template> ``` 这样就可以在跳转到详情页的同时，将 `item.id` 作为参数传递给详情页，然后在详情页中获取参数并进行后续操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值