Ant Design Vue使用v-for动态生成的组件绑定的点击事件无效

最新推荐文章于 2024-08-05 10:19:59 发布

" onclick='alert(6)'

最新推荐文章于 2024-08-05 10:19:59 发布

阅读量2k

点赞数 1

分类专栏：前端文章标签： vue js 点击事件

本文链接：https://blog.csdn.net/weixin_40984822/article/details/109473656

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue/Ant Design Vue使用v-for动态生成的组件绑定的点击事件无效，且明明设置了而且也有cursor:pointer;属性，但是鼠标悬浮不会变成小手形状而且点击没执行方法，但是元素上的文字是可以被选中的，说明并不是元素上层有透明遮罩层，导致无法点击到组件。

排除其他原因如事件绑定错误之后，查看动态生成元素的父元素，发现有属性 pointer-events: none;

pointer-events: none; 的作用如下：
    阻止用户的点击动作产生任何效果
    阻止缺省鼠标指针的显示
    阻止CSS里的hover和active状态的变化触发事件
    阻止JavaScript点击动作触发的事件

将动态生成元素css属性修改为 pointer-events: auto; 即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

" onclick='alert(6)'

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

使用form-create动态生成vue自定义组件和嵌套表单组件

10-17

在Vue.js开发中，动态生成组件是一个非常实用的功能，它允许开发者根据业务需求灵活地创建和更新组件。`form-create`是一个专为Vue设计的工具，用于动态生成表单及自定义组件，使得构建复杂的表单场景变得简单。在...

蒙层阻止点击事件问题

qq_45594237的博客

10-15

1411

今天在项目中遇到这样一个问题：单击图片，出现蒙层，再次点击，蒙层消失，问题是当蒙层出现时，无法点击图片解决方案：一行css代码 pointer-events: none; /** 阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示阻止CSS里的hover和active状态的变化触发事件阻止JavaScript点击动作触发的事件 **/ ...

参与评论您还未登录，请先登录后发表或查看评论

v-for循环中的点击事件无效，不报错也不崩溃处理心得。

SilenceJude的博客

06-14

3373

晚上加点东西到列表循环里，结果发现怎么改点击事件都不生效。查看控制台，也没有报错，只是单纯的点击不生效。于是写了个测试按钮，一步步的挪，发现都是可以的。一直挪到v-for中就会失效。 <div class="hot_list"> <div class="hot_info_item" v-for="(item,i) of currentImageItem.hotAreaConfigInfoList" :key="item.id">

Vue3使用Ant，alert组件在使用v-show时，不显示的问题

最新发布

的博客

08-05

147

ant使用v-show异常移除节点，解决方式和原因分析。

遮罩层按钮事件失效

weixin_43676950的博客

11-18

895

项目场景：鼠标悬浮在图片上时，显示删除按钮。点击完成删除操作，问题描述：实现完页面效果时，点击删除标识不能触发删除事件。原因分析：可能是遮罩层，挡住了按钮事件。解决方案：在遮罩层添加pointer-events:none;样式 .mask{ position:absolute; background:rgba(101,101,101,0.6); color:#ebe3e3; opacity: 0; top: 0; right: 0;

vue3+bootstrap5中,v-for与click一起用时事件无效

qq_33596901的博客

01-16

630

最开始我以为我遇到的问题：v-for 和 @click一起用导致click事件无效然后在网上搜了好久，试了很多解决方案，但是都没有成功实际上我遇到的问题：我的v-for写在bootstrap5的list-group的li标签上，而该标签以及子标签是无法触发click事件的。

[VUE]Vue中的for循环引发的一系列问题；for循环无法数据绑定；渲染原理；

qq_31103801的博客

06-08

1941

vue中的for循环引发的一系列问题； for循环无法数据绑定； for循环渲染dom原理；

ant-design-vue-jeecg-master.zip

05-17

Ant Design Vue 是阿里团队推出的 Vue 版本的 Ant Design，它继承了 Ant Design 的设计哲学，同时利用 Vue.js 的特性，为开发者提供了丰富的组件库，涵盖了表单、布局、数据展示等多个方面，使得开发者能够快速构建...

ant-design-vue-jeecg.rar

11-16

4. **指令系统**：如v-if、v-for等，它们是Vue.js中的特殊属性，用来处理条件、循环等逻辑。 5. **计算属性和侦听器**：用于响应式地处理复杂逻辑和监听数据变化。 6. **路由管理**：Vue Router 是Vue.js的官方路由...

Ant design vue中的a-select在动态给option赋值之后，placeholder失效.pdf

12-16

在给出的代码示例中，`a-select`组件的`v-model`绑定到`receiveAcademy`变量，而`option`是通过`v-for`指令动态生成的，基于`allCollege`数组。当通过`getALLCollege`方法从服务器获取数据并填充`allCollege`时，`...

基于vue Ant-Design 的表单设计器.zip

12-26

Vue.js Ant-Design 表单设计器是一个强大的工具，它允许开发者在Vue项目中快速构建复杂的动态表单。这个工具结合了Vue.js的响应式特性和Ant Design的优美UI组件库，为开发人员提供了一种高效、灵活的表单设计解决...

vue.js中用v-for遍历出的li中的@click事件在移动端无效

zenkle的博客

05-06

2887

使用的better-scroll默认会阻止touch事件。所以在配置中需要加上click: true mounted () { this.scroll = new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true }) } ...

vue v-for中绑定事件无效

A88552211的博客

03-04

595

我是因为在样式中加入了 z-index:-1 所以点击样式无效但是z-index：1是有效的

Android 输入法键盘和activity页面遮挡问题解决

weixin_45866907的博客

09-28

Android 输入法键盘和activity页面遮挡问题解决

vue3使用ant-desgin-vue的table行点击事件无效

m0_49403034的博客

08-26

1822

ant-desgin官网给了一个方法：customRow 也贴了使用方法但是因为是页面直接引用的组件，所以尝试了这个方法报错：于是百度到说用on：{click(){}}，也做了相应尝试，点击事件也不生效最终修改如下：即可正常使用 ...

vue.js中用v-for遍历出的li中的@click事件在移动端无效better-scroll

唐策的博客

07-03

3129

应该是使用了better-scroll的原因，默认它会阻止touch事件。所以在配置中需要加上click: true // better-scroll的原因，默认它会阻止touch事件。所以在配置中需要加上click: true // myScroll = newIScroll('#wrapper', { mouseWheel: true, click: true, tap: true })...

移动端遮罩层点击传穿透

weixin_45799605的博客

07-07

180

点级遮罩层的事件里设置 html.body overflow:hidden; 同时获当前scolltop 关闭遮罩层同时移除这个样式设置scollTop 恢复之前的位置

Vue动态组件用法及使用场景

全栈弄潮儿

10-26

2457

Vue允许你使用动态组件（Dynamic Components）来根据运行时的数据动态切换渲染不同的组件。这在构建可扩展和灵活的用户界面时非常有用。你可以使用元素来实现动态组件，结合:is属性来指定要渲染的组件。

【Ant design vue】antd实现动态增减表单项，支持赋初始值！