解决vue中给button按钮添加点击事件，事件不生效问题。

最新推荐文章于 2024-07-26 23:52:22 发布
最新推荐文章于 2024-07-26 23:52:22 发布
阅读量1.4w 收藏 11
点赞数 4
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/net_worker_/article/details/117930206
版权
在Vue开发中，遇到给button添加click事件后事件不生效的问题。问题根源在于浮动的div包裹button，导致浏览器无法识别button的有效宽高。解决方法是对父元素div清除浮动，如使用overflow:hidden。
摘要由CSDN通过智能技术生成

解决vue中给button按钮添加点击事件，事件不生效问题。

话不多说，直接切入正题：

我们在开发中是不是经常会遇到给button或者input添加click事件，但是methods中却不走这个事件的问题呢？
我找了很多文档，跟button本身是没有关系的。

话不多说 看代码：

 <div class="parentbox">
      <div class="childbox
最低0.47元/天 解锁文章
Hell's Angel
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
解决vue 绑定对象内点击事件失效问题
10-18
今天小编就为大家分享一篇解决vue 绑定对象内点击事件失效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue组件中click事件失效的问题
10-16
今天小编就为大家分享一篇解决vue组件中click事件失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue学习—点击事件AND显示和隐藏
最新发布
2301_79659699的博客
07-26 459
- keyup 用户松开按键时触发的事件，enter表示会回车 -->让状态可以来回切换， 将false改成!web.show即可。先选中文本框出现光标，点击回车后，数值增加。通过该种方式可以实现自定义快捷键的设置。简写和普通方法所得到的结果是一样的。做一个捉迷藏小效果吧（如下图）
vue click点击绑定两个事件
骨子里的偏爱
03-15 3759
vue click点击绑定两个事件
Vue button 的 @click 方法无效 钩子函数没有执行
Snails的博客
08-27 1万+
Vue项目中使用button绑定click事件，事件无法触发methods中的方法解决办法 事故还原 小胖做完公司的项目，老大看着小胖疲惫的脸庞，有点心疼小胖，就给小胖放了三天假，没有给小胖新的需求。小胖平常主要是写的后端，但是最近跟小顺子有点聊技术，小顺子经常把Vue挂在嘴边，小胖有点不服气，正好最近也有时间，打算利用这三天把Vue入个门，但是刚开始就把小胖给难住了，小胖写了一个button，并绑定了click点击事件，但是发现无法触发methods中的but方法，异常提示信息大致的意思是but_aja
Vue：button按钮的点击
谢桥的博客
12-09 2520
【代码】Vue：button按钮的点击。
vue 元素绑定的@click方法失效问题
千里之行，始于足下！
10-12 2万+
今天做项目时发现一个在元素绑定的事件不生效的问题，作此记录以提醒自己。具体代码如下： <el-button @click="clickFun">按钮111</el-button> <button @click="clickFun([1,2,3,4])">按钮222</button> import {getInfo} from './api/test.js' //api接口 export default { name: 'test', data(){
Vue点击事件失效
m0_56800567的博客
09-20 8518
Vue点击事件失效 ,在码代码的时候发现, 使用Vue的点击事件突然失效,就算是打印输出也没有反应 , 回过头来发现是自己在引入better-scroll 的时候出现的问题, 实现滑动效果的时候 , 没有添加配置项 click: true;导致子组件的点击事件失效。1. div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑定到span上测试一下就好了，如果是被覆盖了，加个这个，2. 还有一种可能被默认事件阻止了，我们加个这个就能解决，
解决VUE框架 导致绑定事件的阻止冒泡失效问题
11-27
在这个场景中，我们讨论的是如何在Vue中解决阻止事件冒泡失效的问题。 首先，让我们回顾一下Vue中绑定事件的基本语法。通常，我们可以使用`v-on`指令将事件处理器与组件的方法关联起来，例如： ```html <button v-...
iview给radio按钮组件加点击事件的实例
12-29
如下所示： 商家电话 负责人电话 ()>输入新的电话</Radio></span> iview的单选按钮如果想要加点击事件，加在 RadioGroup 上和 Radio 上都不生效，这时，可以给组件外
【Bug记录】Vue绑定按钮点击事件不生效，控制台不打印信息
翱翔于世纪的博客
03-12 1161
目录一、问题描述二、发现问题并解决 一、问题描述 作为刚入门Vue小白的我，在使用Vue进行登录表单按钮绑定点击事件的时候，发现其方法没有执行。一点击按钮就会重新刷新页面。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
vue 点击事件失效
Hero_rong的博客
11-10 1万+
点击事件失效的情况，总共有三种 1. 没有点到那个元素，比如说div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑定到span上测试一下就好了，如果是被覆盖了，加个这个，.stop 阻止一下冒泡就行了 @click.stop="doSomething($event)" 2.还有一种可能被默认事件阻止了，我们加个这个就能解决，.native @click.native='setUp(index)' 3.如果项目中的某些组件，使用了
【Vue 基础】06-按钮点击事件
ChaoChao66666的博客
04-25 782
【Vue 基础】06-按钮点击事件
vue.js @click绑定点击事件不生效？
热门推荐
qq_39562867的博客
08-16 7万+
这个是在组件开发中遇到的问题，当时我在编写button的组件，模板是这样的： &lt;template&gt; &lt;button class="disable-hover button ion-button" :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongCl...
Vue组件点击事件不触发的问题，添加事件修饰符native解决
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
03-04 7825
相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
点击事件不生效,点击不起作用，多半是元素被遮挡。css元素被遮挡，选择不到
ParadiserD的博客
10-31 1万+
有过js控制点击不生效的时候吗，这时就要考虑你的元素是否被其他元素遮挡了。这里说的遮挡并不是看不到。而是能看到，却无法透过另一元素选中它。 可以试一下以下两种方案： 1、css调节z-index 首先要考虑的是更外层的元素遮挡了靠里层的元素。比如外层遮挡为一个div（.card）被遮挡的是一个input框为（.input-space） 这时就要把遮挡它的元素的css中的z-index调的比他
排错之-点击事件不生效
HuLuWa1997的博客
04-01 364
1.我在做给所有的服务器添加点击事件弹出详情的弹窗，按理来说，给所有dom层的服务器添加一个共同的类，然后遍历添加点击事件就可以实现了， // 打开服务器详情弹窗 $(".screen-content .sever-pop").each(function () { $(this).click(function (){ $(".pop-wrap").show() }) }); 但是我发现竟然给一个
van-form表单中自定义点击事件不触发
weixin_43898407的博客
09-22 1510
van-form表单中自定义点击事件不触发 button 中使用native-type="button"属性去除自动 <van-form @submit="submit"> <van-button round native-type="button" @click="pre()">上一步</van-button> <van-button round native-type="submit">下一步</van-button> <
a-form-item中的button按钮点击不生效
05-01
可能是因为您没有给按钮绑定点击事件。您可以在按钮上添加 @click 属性，然后将其绑定到一个方法上。示例代码如下： ```html <template> <a-form> <a-form-item> <a-button type="primary" @click="submitForm">提交</a-button> </a-form-item> </a-form> </template> <script> export default { methods: { submitForm() { // 在这里编写按钮点击后要执行的代码 } } } </script> ``` 在上面的示例中，我们给按钮添加了 @click 属性，并将其绑定到了 submitForm 方法。当用户点击按钮时，Vue.js 将调用 submitForm 方法中的代码。您可以在该方法中编写您需要执行的代码，比如提交表单数据等。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值