vue点击事件失效

最新推荐文章于 2024-03-22 16:10:59 发布
最新推荐文章于 2024-03-22 16:10:59 发布
阅读量5.7k 收藏 2
点赞数 3
分类专栏： vue2后台管理系统 文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maowencai/article/details/126384159
版权

1.当你有一个div标签里面有一个sapn标签，把点击事件绑定到div上，但是它可能是点在sapn标签上面的，这种情况吧点击事件绑定到span标签上测试一下，如果是被覆盖的情况加上.stop阻止默认冒泡就可以了

@click.stop=""

2.默认事件被阻止，加.native。这个的话还有一种情况在自定义组件上绑定@click事件无法触发也可以使用

自定义组件上无法触发原因：

组件中绑定的事件都是这个组件本身存在的事件，因此在自定义组件上绑定@click会被vue认为是组件内部的事件，然而组件内容并没有对这个@click做相应的处理，所以没有反应

@click.native=""

我的86呢！
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue @click不生效_Vue+element(v2.3.2)(第四期)
weixin_33741534的博客
01-26 315
1.挂载全局变量url1.新增url.jsletBASE_URL="https://xxx.com";exportdefault{BASE_URL}2.main.jsimportgolbal_URLfrom"./utils/url";Vue.prototype.$BASE_URL=golbal_URL;3.页面使用console.log(this.$BASE_UR...
解决VUE框架 导致绑定事件的阻止冒泡失效问题
08-27
下面小编就为大家分享一篇vue监听滚动事件 实现某元素吸顶或者固定位置显示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE解决 v-html不能触发点击事件的问题
10-16
今天小编就为大家分享一篇VUE解决 v-html不能触发点击事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue3中使用v-html，click不生效的问题
最新发布
qq_29517595的博客
03-22 746
vue3中使用v-html，v-html中的click不生效及无法展示html的问题
vue中disabled 的用法
热门推荐
lomenw的博客
04-03 9万+
<input type="text" :disabled="disabled"> data:{ disabled:false }
vue中div@click不起作用
sinat_23336093的博客
09-08 1万+
vue中div@click不起作用 前提，一个外层div，样式：position: relative;，设置了点击事件@click 里面用了position: absolute;绝对定位，之后点击就不起作用 目前已知两种解决方法 1、最外层div的z-index层级设置比里面绝对定位的大 2、用@click.prevent也是可以的 v-on的指令修饰符 .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .
Vue 之 解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
weixin_45092437的博客
09-05 1万+
通过官方文档可以得知两个重点：① 通过v-html生成的页面元素，不会被当做Vue模板进行编译，只会作为普通的html代码被插入，也就是说通过v-html插入的html@click、v-if等，则不会生效，因为他们没有被Vue编译，而浏览器并不会识别这些vue语法，所以这些语法都不生效。② 在.vue文件中如果style标签上增加了scoped属性，那么该标签内的样式就不会对v-html生成的页面元素起作用，还是因为这些元素没有被当做Vue模板进行编译，所以不生效。
Vue组件点击事件不触发的问题，添加事件修饰符native解决
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
03-04 6298
相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
Vue点击事件失效
m0_56800567的博客
09-20 8397
Vue点击事件失效 ,在码代码的时候发现, 使用Vue的点击事件突然失效,就算是打印输出也没有反应 , 回过头来发现是自己在引入better-scroll 的时候出现的问题, 实现滑动效果的时候 , 没有添加配置项 click: true;导致子组件的点击事件失效。1. div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑定到span上测试一下就好了，如果是被覆盖了，加个这个，2. 还有一种可能被默认事件阻止了，我们加个这个就能解决，
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组件中click事件失效的问题
12-13
在引入better-scroll的组件中使用@click事件的时候，点击事件失效，v-on:click、v-bind:click、@click.native都不行，试了一下@touchstart是却是可以的，发现better-scroll的配置中没有设置click：true，设置过之后...
解决vue 绑定对象内点击事件失效问题
12-12
突然的发现某段 html 代码中点击事件失效了。 仔细观察才发现，这段代码内的...以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
10-15
主要给大家介绍了关于Vue在chrome44偶现点击子元素事件无法冒泡的解决方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
【踩坑日记】Vue组件@click事件点击没有反应
LadenxxxxD
10-25 1万+
项目场景： 在自定义组件上绑定@click事件无法触发 问题描述： 在自定义组件上绑定@click事件无法触发 <template> <div>自定义组件<div> </template> <MyComponent @click="myMethods"></MyComponent> 原因分析： 凡是组件中绑定的事件，都应该是这个组件本身就存在的事件。 因此在自定义组件上绑定的click会被vue认为是组件内部的事件。 事实
Vue中@click不生效的解决办法
weixin_45336090的博客
11-21 5423
问题产生的原因：     如果是普通的HTML，@click可以触发。     如果是使用ElementUI组件和路由，@click会失效。 因为Vue使用的是一套自己的事件传递机制，@click等事件是经过Vue封装的，需要为 @click 添加标识符 .native <el-button type="primary" @click.native="clickFunction()">点击按钮</el-bu
Vue @click不生效问题
weixin_43872691的博客
08-02 555
Vue @click不生效问题。
vue自定义组件@click点击失效问题，附解决方案
c1518589418的博客
12-03 1万+
问题描述： 自定义组件在使无法，无法绑定原vue文件内的原生click事件 原因分析： 根据查询vue官方文档，得知click事件作用于组件内部，如果组件内没有写click事件，便会无响应。 问题解决： 1.参照官方文档，可以用@click.native=“click”解决 2.可以用：将事件传递至组件内，也符合组件间的单向数据流，我就是这样解决的 主组件写法： 被调...
大屏可视化项目之vue3-seamless-scroll无缝滚动组件（二）——vue-seamless-scroll中click点击事件无效的处理方法 & 事件委托之事件捕获的具体应用
weixin_44867717的博客
11-25 4328
大屏可视化项目之vue3-seamless-scroll无缝滚动组件（二）——vue-seamless-scroll中click点击事件无效的处理方法 使用vue-seamless-scroll实现数据无缝连续滚动 1、原理 无限滚动原理：无限滚动的原理就是把之前的遍历的内容复制一份，滚动这两部分内容，达到无缝滚动效果。 基本原理是把要滚动的部分复制一份，滚动这两部分相同的内容，进而实现无缝连续滚动 2、遇到的问题 当ul1中的数据未滚动完时,ul2 部分的click事件不起作用，无法实现点击这行功能 （
vue 点击事件不生效
07-28
Vue点击事件不生效的原因可能有几种。首先，可能是因为在引入better-scroll时没有添加配置项click: true，导致子组件的点击事件失效。\[1\]其次，如果在自定义组件上绑定@click，Vue会认为这是组件内部的事件，而组件本身并没有对这个@click做相应的处理，所以没有反应。可以尝试使用@click.native来绑定原生的点击事件。\[2\]另外，如果事件绑定在父元素上，但实际点击的是子元素，可以尝试将@click事件绑定到子元素上，并使用.stop修饰符来阻止事件冒泡。\[3\]请检查以上几种情况，看是否能解决你的问题。 #### 引用[.reference_title] - *1* *3* [Vue点击事件失效](https://blog.csdn.net/m0_56800567/article/details/126961324)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue点击事件失效](https://blog.csdn.net/maowencai/article/details/126384159)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值