vue 点击事件失效检查办法

已于 2022-06-25 16:35:51 修改
阅读量1.7k 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2022-06-25 16:28:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TY_GYY/article/details/125460812
版权

第一使用控制台检测

看你一下你的元素控件的真实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. 再者设计问题 自己百度看一下自己使用的组件有没有类似问题
子言慕雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue组件中click事件失效的问题
12-13
在Vue.js开发过程中，我们经常会遇到各种问题，其中包括点击事件（click）失效的情况。这个问题在使用第三方库如better-scroll时尤为常见。本文将详细解析如何解决Vue组件中click事件失效的问题，以及涉及到的Vuex中...
移动端Vue项目a标签点击事件无效
nunumaymax的博客
01-07 2584
移动端Vue项目a标签点击事件无效 近期项目出现了部分机型点击无效的现象，后来定位到原来是a标签的问题，将a标签更换为div标签，加宽加高点击范围，就可以解决这个问题。
vue 移动端 click事件失效问题
dreamy_wx的博客
02-02 1377
可能是你使用了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 移动端项目 百度地图 点击事件无效、不触发 解决方案
热门推荐
daixiansuo
09-05 1万+
解决百度地图 手机端 点击事件不触发 的一种方案 版权声明：本文为博主原创文章，转载请标明原文出处。 个人技能手册：https://github.com/DevilMafia/personal-skill-tree 问题背景 我是半路接手的这个项目，该项目使用 Vue 开发的一款 手机端的页面。到手里时，使用百度地图的部分已经完成，之前的兄弟在开发是一只都是在 PC 端用浏览器的手机...
Vue点击事件失效
m0_56800567的博客
09-20 8462
Vue点击事件失效 ,在码代码的时候发现, 使用Vue的点击事件突然失效,就算是打印输出也没有反应 , 回过头来发现是自己在引入better-scroll 的时候出现的问题, 实现滑动效果的时候 , 没有添加配置项 click: true;导致子组件的点击事件失效。1. div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑定到span上测试一下就好了，如果是被覆盖了，加个这个，2. 还有一种可能被默认事件阻止了，我们加个这个就能解决，
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
10-15
在本文中，我们将探讨一个特定的问题，即在Chrome 44浏览器中，Vue应用中偶尔出现的子元素点击事件无法冒泡到父元素的问题，以及如何解决这个问题。 首先，问题的背景是在一个项目中，左侧有一个列表，用户点击列表...
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
10-18
Vue实例中，`mousedown`事件用于初始化拖动状态，记录起始位置（`startx`和`starty`）以及元素相对于鼠标点击点的偏移量（`sb_bkx`和`sb_bky`）。`mousemove`事件处理函数则根据鼠标的当前位置计算元素的新位置，并...
vue登录页面cookie的使用及页面跳转代码
10-16
2. **首页跳转用户信息页**：在首页（index.vue）上，当用户访问时，会检查cookie中是否存在`username`。如果存在并且不为空，用户将被重定向到用户信息页；否则，他们会被引导回登录页。 ```javascript methods: {...
BootStrap 页签切换失效的解决方法
12-08
解决这个问题的方法是仔细检查最后一个能正常切换的页签（在示例中是“页签2”），确保其内部没有多余的`</div>`标签。如果存在，删除这个多余的结束标签，使HTML结构恢复正确。正确的HTML结构应该如下所示： ```...
vue 设置对button不能进行短时间的重复触发点击事件
vanora1111的博客
08-10 959
vue中设置按钮不能进行短时间的重复点击而重复的触发事件
vue中a标签点击事件效果不理想
qq_42356513的博客
02-27 2271
如果你发现在vue项目中给a标签加点击事件,然后在methods的事件处理函数中程序达不到预期的效果,比如该出的弹窗没有出来,考虑给点击事件加个prevent修饰符试试。prevent修饰符,本质上是阻止了默认行为 <a class="sindelet" @click.prevent="onDeleteCart(item)">删除</a> ...
如何禁用 a 标签的点击事件 disabled属性 和 pointer-events属性值详解
Tang
02-28 6542
首先 ，大家要知道： a标签 是没有disable 属性的 ， 如果想用disable 禁止a标签的点击事件，也是可以实现的；往下看 1. a标签 要用disable 属性，必须和pointer-events属性一起使用，例子 如下： HTML 部分代码： &lt;a class="praise"&gt;赞&lt;/a&gt; JS 代码： ...
给<a>标签添加不可用属性
angleyatou的专栏
01-20 7606
1. 简单设置a标签的disabled属性就可以阻止事件（onclick）还有href吗？ 锚标签本身不支持disabled，所以简单设置了disabled属性是没有任何效果的 2. 如何阻止href？ 首先看一下 关于a标签的onclick与href的执行顺序 1). onclick的事件被先执行，其次是href中定义的（页面跳转或者javascript） 2). 同时存在两个定义
VUE 给类似a标签加点击事件不跳转的问题
add-oil的博客
02-22 1万+
VUE的@click事件修饰符 运用： .prevent 阻止默认行为 <a href="url" @click.prevent="myClick">点击</a> .stop 阻止冒泡，只执行 start 不执行 end <div id="app" @click="end"> <input type="button" value="开始" @c...
Vue3 项目防止按钮重复点击（重复请求接口）
用心创作每一篇文章
11-15 3249
1.保存提交按钮不小心点击了多次。2.由于网络服务器卡等原因点击事件没有及时响应又点击了一次，造成数据的重复提交和保存，数据的异常。3.resize、，输入框内容校验等频繁操作。
vue点击事件失效
maowencai的博客
08-24 6043
vue点击事件失效
vue-seamless-scroll 的click不触发问题
@必意玲
07-01 4502
因为需要做一个无限滚动的table效果，然后百度了一下，看到网上挺多用 vue-seamless-scroll 的，然后自己就用了。后面一些问题给大家总结下。 使用很简单，这里就不阐述了，主要讲下用这个的一些业务要求，遇到的问题。 无限滚动原理：无限滚动的原理就是把之前的遍历的内容复制一份，滚动这两部分内容，达到无缝滚动效果。 需求：首先需要一个这样的需求，才能碰到这个问题（通过点击列展示详情数据） 遇到的问题一： 当第一个ul中的数据滚动完时,第二个ul 部分的click事件不起作用，无法实现一些点击
自定义文件上传第二次点击无效
baidu_41601048的博客
12-02 658
自定义文件上传第二次点击无效
vue双击事件屏蔽单击事件
最新发布
01-09
在Vue中，可以通过事件修饰符来屏蔽单击事件，以实现双击事件的效果。具体步骤如下： 1. 在Vue模板中，使用`@dblclick`绑定双击事件，使用`@click.stop`修饰符来阻止单击事件的冒泡。 ```html <template> <div> <button @dblclick="dbclickNode" @click.stop="clickNode">双击我</button> </div> </template> ``` 2. 在Vue实例中，定义`dbclickNode`和`clickNode`方法来处理双击和单击事件。 ```javascript <script> export default { methods: { dbclickNode() { // 双击事件执行的逻辑代码 }, clickNode() { // 单击事件执行的逻辑代码 } } } </script> ``` 通过以上步骤，双击事件会屏蔽单击事件的触发，从而实现了双击事件的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值