vue 点击事件失效检查办法

原创 已于 2022-06-25 16:35:51 修改 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2022-06-25 16:28:58 首次发布
博客探讨了前端开发中元素大小未撑起、样式设置、第三方组件事件处理的问题。指出使用100%宽高、检查margin以及委托事件解决资源消耗。特别提到vue-seamless-scroll组件在滚动和点击事件上的冲突，建议避免为每个item添加独立click事件，推荐使用事件委托，并提醒注意冒泡事件和事件阻止。解决方案包括正确设置作用域、检查组件兼容性和设计问题。

第一使用控制台检测

看你一下你的元素控件的真实size是不是根本没有撑起来
加上样式把界面撑起来

  height: 100%;
  width: 100%;

检测一下margin之类的

使用的控件本身问题

设计问题

例如vue控件vue-seamless-scroll 实现列表滚动效果 但是做页面自动滚动的时候 如果使用v-for给每个item添加点击事件后发现在滚动到第二遍的时候点击事件失效
原因是vue-seamless-scroll 自行复制了一份DOM 导致在复制的DOM出现的时候点击事件消失
先说一下这种每个item都加一个click函数是非常非常非常耗资源 不建议这样开发 解决办法使用委托事件
具体可以看一下这位博主
注意使用委托事件时要把所有想起效的控件加入bind
在这里插入图片描述

冒泡事件

点击事件被默认事件阻止了使用.native可以解决子组件阻止点击事件

总结

  1. 要么是作用范围设置不对，或者控件没有被撑起来
  2. 要么是使用第三方组件阻止事件
  3. 再者设计问题 自己百度看一下自己使用的组件有没有类似问题
解决Vue中按钮点击事件无效的问题：优雅处理Vue中按钮点击事件
FwgForth的博客
10-08 3709
在Vue中，按钮点击事件无效的问题可能由多种原因引起。通过检查事件绑定语法、正确挂载Vue实例、检查按钮的父元素、确认按钮未被禁用，并使用Vue的修饰符，我们可以解决这个问题。在Vue开发中，给按钮添加点击事件是非常常见的需求。然而，有时候我们会遇到一个问题：尽管我们已经正确地绑定了点击事件，但按钮点击后事件却没有触发。有时候，按钮的父元素可能有一些CSS样式或事件绑定，导致按钮点击事件无效。在Vue中，你需要将Vue实例挂载到一个HTML元素上，才能让Vue的指令和事件生效。'按钮点击事件触发！
【uniapp踩坑记】Vue3监听点击事件竟然失效了？
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
05-08 410
如果这个组件是你自己封装的，或者你知道它内部有，那你可以用@click如果你不知道组件内部有没有触发click事件，或者你只是想监听原生 DOM 的点击，那就直接用@tapVue3 的语法是更清爽了，但像这种细节，如果你没仔细翻文档，真的会踩坑踩到怀疑人生。如果你也在从 Vue2 迁移到 Vue3，特别是在做 uniapp 项目的话，记得检查一下这些事件绑定写法，不然有可能 debug 半小时都找不到点不动的原因！想看更多 uniapp 实战、Vue3 迁移技巧，欢迎关注我的公众号代码简单说。
Vue 移动端项目 百度地图 点击事件无效、不触发 解决方案
热门推荐
daixiansuo
09-05 1万+
解决百度地图 手机端 点击事件不触发 的一种方案 版权声明：本文为博主原创文章，转载请标明原文出处。 个人技能手册：https://github.com/DevilMafia/personal-skill-tree 问题背景 我是半路接手的这个项目，该项目使用 Vue 开发的一款 手机端的页面。到手里时，使用百度地图的部分已经完成，之前的兄弟在开发是一只都是在 PC 端用浏览器的手机...
Vue点击事件失效
m0_56800567的博客
09-20 8770
Vue点击事件失效 ,在码代码的时候发现, 使用Vue的点击事件突然失效,就算是打印输出也没有反应 , 回过头来发现是自己在引入better-scroll 的时候出现的问题, 实现滑动效果的时候 , 没有添加配置项 click: true;导致子组件的点击事件失效。1. div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑定到span上测试一下就好了，如果是被覆盖了，加个这个，2. 还有一种可能被默认事件阻止了，我们加个这个就能解决，
vue中v-for和@click同时使用时@click失效
qq_45292334的博客
07-15 3478
解决方法如下: <Tag class="user-tag" type="dot" color="success" v-for="item in userList" :key="item.id" size="large"
vue中的v-for和@click同时使用时@click失效,vue的native
qq_47443027的博客
05-08 2153
native是什么？ .native - 监听组件根元素的原生事件。 主要是给自定义的组件添加原生事件。 官网的解释： 你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。 通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触 发的 使用native的原因主要有两点： 在vue组件中，所有的原素必须在一个根结点上。 当想要在根结点响应数据，如果直接绑定v-on是不能响应的，这.
解决vue组件中click事件失效的问题
12-13
在Vue.js开发过程中，我们经常会遇到各种问题，其中包括点击事件（click）失效的情况。这个问题在使用第三方库如better-scroll时尤为常见。本文将详细解析如何解决Vue组件中click事件失效的问题，以及涉及到的Vuex中...
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
10-15
在本文中，我们将探讨一个特定的问题，即在Chrome 44浏览器中，Vue应用中偶尔出现的子元素点击事件无法冒泡到父元素的问题，以及如何解决这个问题。 首先，问题的背景是在一个项目中，左侧有一个列表，用户点击列表...
解决vue的touchStart事件及click事件冲突问题
10-15
例如，在handleSelfClick方法中，可以通过检查'ontouchstart' in document来判断是否支持触摸事件，如果支持则调用handleTouchStart方法，否则调用handleleterClick方法。这样，只有在支持触摸事件的设备上才会绑定...
解决 vue-seamless-scroll 无缝滚动点击事件失效问题
最新发布
记录常见的问题以及解决办法
09-24 458
摘要：使用vue-seamless-scroll实现无缝滚动时，由于插件会克隆滚动数据，导致@click事件在克隆元素上失效。解决办法是......
vue click点击事件失效
weixin_53898445的博客
07-13 1120
图片图层过高 导致lick点击事件失效
vue 移动端 click事件失效问题
dreamy_wx的博客
02-02 1494
可能是你使用了better-scroll，默认它会阻止touch事件。所以在配置中需要加上click: true 例： import BScroll from 'better-scroll' mounted() { this.scroll = new BScroll(this.$refs.search, {mouseWheel: true, click: true, tap: true }) }, ...
vue移动端点击事件延迟_解决Vue 界面在苹果手机上滑动点击事件等卡顿问题_莺语_前端开发者...
weixin_39739404的博客
12-23 1407
用(1).滑动页面卡顿，(2).点击事件响应缓慢，百度才发现在苹果手机上有300ms的延迟。一.滑动页面卡顿//页面布局页面内容在对应的组件的最外层div上加上这样的样式：.content{-webkit-overflow-scrolling: touch;}-webkit-overflow-scrolling: touch;这句代码最好可在公共的样式中添加，防止很多页面都需要写的麻烦。这句代码虽...
VUE 表格动态滚动导致点击事件失效问题
LEON_RAY
04-07 1262
HTML： <div id="tableBox"> <div id="table1"> <div v-for="(item, index) in list" :key="index" @click="hanldeClick(item)" > <-- 不重要的row --> </div> </div> <div id="table2"&...
Vue鼠标点击事件失效解决方法
Mini国
06-01 4595
问题： 再electron和vue开发的桌面应用中，为应用添加了一个拖动功能后，再拖动内部所有的鼠标事件失效，无法触发 解决： 因为父级元素设置了样式： -webkit-app-region:drag，阻止了鼠标的点击事件，只需要再内部需要点击的部门添加一个 样式：-webkit-app-region:no-drag，这样子就可以解决了 优化：再这边点击会出现在一个黄色的框框，可以加样式outline: none 解决 ...
vue-seamless-scroll 的click不触发问题
weixin_49577940的博客
12-02 1241
项目里有一个无缝滚动的列表效果 , 用的vue-seamless-scroll 插件 , 可以实现列表滚动没问题 , 但因为列表每一条都有click事件 , 最近发现总是有一条点不动 , 审查元素发现是： 当第一个ul中的数据滚动完时,第二个ul 里的li的click事件不起作用 解决方法 这是之前的写法（可以循环显示，点击第一个ul里的li可以触发click事件，但是点击第二个ul里的li不能触发click事件) , 关于vue-seamless-scroll的一些配置可以看我另一篇
移动端Vue项目a标签点击事件无效
nunumaymax的博客
01-07 2804
移动端Vue项目a标签点击事件无效 近期项目出现了部分机型点击无效的现象，后来定位到原来是a标签的问题，将a标签更换为div标签，加宽加高点击范围，就可以解决这个问题。
自定义文件上传第二次点击无效
baidu_41601048的博客
12-02 853
自定义文件上传第二次点击无效
vue2纵向自动滚动组件点击事件失效
12-29
### Vue2 中纵向自动滚动组件点击事件失效解决方案 在 Vue2 的开发过程中，遇到纵向自动滚动组件中的点击事件失效问题通常是由多种因素引起的。这类情况可能是由于样式冲突、JavaScript 事件绑定顺序不当或是框架内部机制的影响。 当面对此类问题时，可以考虑以下几个方面来排查并解决问题： #### 1. 检查 CSS 样式覆盖 如果页面上存在多个层叠上下文（z-index 层级关系），可能会导致某些元素被遮挡而无法响应用户的交互操作。对于提到的“固定列将下方的滚动条盖住”的现象[^1]，建议调整相关容器或子元素的 `position` 和 `z-index` 属性，确保可点击区域不会被其他不可见的内容所掩盖。 #### 2. 验证 JavaScript 事件监听器设置 确认是否正确绑定了所需的 DOM 事件处理器，并且这些处理器确实附加到了预期的目标节点之上。考虑到 Vue 实例生命周期内的变化，在模板编译期间动态创建的新DOM结构可能会影响原有的事件委托逻辑。因此，应当注意使用 `$nextTick()` 方法等待视图更新完成后再执行相应的初始化脚本。 ```javascript this.$nextTick(() => { // 初始化滚动插件或其他依赖于真实DOM的操作 }); ``` #### 3. 排除第三方库干扰 有时引入的一些外部资源如 iView UI 库的不同版本之间可能存在兼容性差异，这可能导致特定功能表现不一致甚至完全失灵。针对这种情况，除了按照官方文档指导进行配置外，还应该仔细阅读发行说明了解是否存在已知 bug 或者需要额外配置项支持的功能特性。 #### 4. 调整滚动行为实现方式 为了防止因浏览器默认处理而导致的问题发生，可以通过自定义的方式接管整个滚动过程。例如利用 requestAnimationFrame API 来平滑控制滚动位置的变化，从而避免不必要的性能开销以及潜在的安全隐患。同时也可以尝试禁用原生滚轮惯性效果以减少误触几率。 ```css /* 禁用 Webkit 浏览器下的弹性回弹 */ html, body { overflow: hidden; } body::-webkit-scrollbar { display:none;} ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值