vue中click无效问题

最新推荐文章于 2024-03-04 09:39:17 发布
最新推荐文章于 2024-03-04 09:39:17 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yipitre/article/details/125845121
版权

当父元素为relative,子元素为absolute时可能会出现click点击无效，无法触发onClick事件的情况

目前已知两种解决方法
1、最外层div的z-index层级设置比里面绝对定位的大
2、用@click.prevent也是可以的

threeMonth@
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决VUE框架 导致绑定事件的阻止冒泡失效问题
11-27
前面遇到了一个问题就是VUE框架内部做了一些处理，使得在我们通过v-for渲染DOM的时候添加新元素的时候，绑定事件也能对新增的元素有效。 而这次遇到的问题则是，原本绑定事件中（该函数没有写在vue实例的methods中），导致阻止冒泡事件失效了。无论是return false 还是event.stopPropagation();都无效。 此时需要通过用VUE提供了事件修饰符来处理，比如阻止事件冒泡@click.stop=’xx()’ .stop .prevent .capture .self .once <a></a> <!
解决Vue对Element中的el-tab-pane添加@click事件无效
06-06
解决Vue对Element中的el-tab-pane添加@click事件无效
Vue组件点击事件不触发的问题，添加事件修饰符native解决
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
03-04 6321
相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
【Vue-Element】el-card 的click点击事件失效解决
feifeiyechuan的博客
06-20 3460
native修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。在element-ui中，突然发现在el-card中添加click事件，怎么点击都触发不了。当然，为什么el-card不支持click，暂不清楚。查资料，说是点击事件需要写成。
VUE 表格动态滚动导致点击事件失效问题
LEON_RAY
04-07 1149
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中@click不生效的解决办法
weixin_45336090的博客
11-21 5424
问题产生的原因：     如果是普通的HTML，@click可以触发。     如果是使用ElementUI组件和路由，@click会失效。 因为Vue使用的是一套自己的事件传递机制，@click等事件是经过Vue封装的，需要为 @click 添加标识符 .native <el-button type="primary" @click.native="clickFunction()">点击按钮</el-bu
解决vue组件中click事件失效的问题
12-13
最近使用vue学习开发移动端的项目，使用了bette-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候，点击事件失效，v-on:click、v-bind:click、@click.native都不行，试了一下@touchstart是却是可以的，发现better-scroll的配置中没有设置click：true，设置过之后click事件成功。 后来在使用vuex的时候一直报“[vuex] unknown mutation type: changeCity”，才发现在store文件中将mutations写在了state里面，被自己蠢哭了。。。正确写法如下
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的click事件在html中失效问题
wen13727561564的博客
05-10 1237
这个问题也是困扰了我一个多小时，一开始以为vue.js引入不成功，运行后打开Vue调试器也成功，所以Vue是引入成功的。又检查了vue版本是不是2，也没问题。这样即可正常触发vue.methods中定义的方法了。
在vue组件中添加click事件无效，@click.native也无效
weixin_71588037的博客
11-08 2681
在vue组件中添加click事件无效，@click.native也无效
vue 移动端在div上绑定click事件 失效
qq_52822043的博客
07-30 1526
在.vue的文件中使用了better-scroll，在div标签上绑定click事件后，无效
解决vue 绑定对象内点击事件失效问题
12-12
突然的发现某段 html 代码中点击事件失效了。 仔细观察才发现，这段代码内的...以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
Vue鼠标点击事件失效解决方法
Mini国
06-01 4322
问题： 再electron和vue开发的桌面应用中，为应用添加了一个拖动功能后，再拖动内部所有的鼠标事件失效，无法触发 解决： 因为父级元素设置了样式： -webkit-app-region:drag，阻止了鼠标的点击事件，只需要再内部需要点击的部门添加一个 样式：-webkit-app-region:no-drag，这样子就可以解决了 优化：再这边点击会出现在一个黄色的框框，可以加样式outline: none 解决 ...
vue中setInterval定时器带来的坑
baidu_35523558的博客
07-04 349
定时刷新问题解决了，但是还有一个问题：初始化页面的时候没有调用定时器里的方法；背景：最近要做一个大屏页面，需要根据用户配置，定时刷新页面（1s、5s等等）；发现问题：定时器并没有起作用，规定时间内并没有自动刷新；把定时器里的方法拿出来单独执行一次，完美解决；
vue自定义组件@click点击失效问题，附解决方案
c1518589418的博客
12-03 1万+
问题描述： 自定义组件在使无法，无法绑定原vue文件内的原生click事件 原因分析： 根据查询vue官方文档，得知click事件作用于组件内部，如果组件内没有写click事件，便会无响应。 问题解决： 1.参照官方文档，可以用@click.native=“click”解决 2.可以用：将事件传递至组件内，也符合组件间的单向数据流，我就是这样解决的 主组件写法： 被调...
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的SEO优化——预渲染后路由+点击事件失效问题解决
yehaocheng520的博客
07-03 2679
vue是单页面框架且前后端分离，不利于seo优化。针对这一点，还是有解决办法的。 什么是SEO优化？ 体现到代码上就是：(最重要的一个就是meta标签的展示) meta标签中的name:可以使用keywords和description来添加搜索引擎的关键字和描述信息。这个就是爬虫会提取的部分。 以下部分是同事提供的，我暂时没有用到，在此做下记录，希望后续有帮助： prerender-spa-plugin——轻量级的seo解决方案 prerender-spa-plugin:轻量级的seo解决方案，对于大
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 div click无效
u012174809的专栏
09-02 5687
每逢半年 总要遇到一个前端诡异问题，花了个把小时才解决，记录一下 <div v-else-if="item.type ===7" class="left-title bgc-opacity" :style="styleObj" @click="changeliveisResize(true)"> <!-- 字幕 --> <div v-if="!item.text"> <div class="text-so..
vue中click事件无效
01-09
可能出现click事件无效的情况可能是由于以下几种原因： 第一，可能是因为绑定click事件的元素没有正确渲染或者被正确挂载到Vue实例上。...通过以上的方法，应该能够解决Vue中click事件无效的问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值