Element UI中点击按钮后不失焦？如何强制给它失焦

最新推荐文章于 2024-05-04 23:53:56 发布
最新推荐文章于 2024-05-04 23:53:56 发布
阅读量1.7k 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/web00_11/article/details/120114767
在Element-UI中遇到点击按钮后颜色变化以及空格键触发事件的问题，可以通过在按钮事件内调用失焦方法解决。通过document.querySelector('按钮选择器').blur()可以让按钮在点击后立即失去焦点，从而避免空格键再次触发绑定事件。此方法适用于需要防止按钮默认行为的场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在使用element-ui 中按钮组件的时候，会发现点击之前和点击之后按钮的颜色不一样，其实是点击时候按钮聚焦，当按空格键时还会触发按钮上绑定的事件，只有点击一下别处才会让按钮失焦

那么该怎么解决这个问题呢？想想既然点击会让按钮聚焦，那么就可以在按钮事件里面加上让按钮失焦的方法即可

document.querySelector('按钮选择器').blur()
elementui 按钮组 默认高亮 点击其他地方不默认失焦 只有点击其他按钮才变焦
桂秋拾貳
08-20 2373
elementUI 按钮组 默认高亮 点击其他地方不默认失焦 只有点击其他按钮才变焦。
element-UI强制按钮失去焦点
Stead_Fast的博客
09-09 2340
问题描述 有时使用element-UI按钮组件el-button时会出现按钮点击事件触发完成之后，按钮依然处于被点击的状态，也就是说依然表现为浅色，没有变回未点击时的颜色。 这是由于点击时点击到了按钮中的文字，或者图标，也就是按钮的子元素<span>或者<i>标签，没有办法触发父元素也就是按钮本身的点击事件 解决方法 在需要的按钮点击事件中调用此方法。 // 强制按钮失去焦点 forceBlur(e){ let target = e.target; if(ta
关于ElementUI按钮组件el-button点击后不自动失焦问题
随笔
09-02 6192
<el-button icon="el-icon-edit" @click="handleClick">click</el-button> ... handleClick (e) { let target = e.target; // 根据button组件内容 里面包括一个span标签，如果设置icon，则还包括一个i标签，其他情况请自行观察。 // 所以，在我们点击到button组件上的文字也就是span标签上时，直接执行e.target.blur()不会生
Element UI点击按钮后不失焦...强制给它失焦
sophie2805的专栏
12-18 7267
使用element ui库，发现button点下去之后会一直保持被点击的状态直到鼠标在别的地方点一下才恢复。也就是说button被点击之后一直没有失焦，直到点击别的地方，将焦点切换走。 虽说不影响功能，但是用起来有点别扭。然后就想办法手动失焦： document.getElementById("xxButton").blur(); 给button加一个唯一ID，然后@click回调函数里，加上上...
ElementUI框架 el-input和el-select组件失焦问题
weixin_43829905的博客
01-08 6520
ElementUI框架 el-input和el-select组件失焦问题ElementUI框架 el-input和el-select组件失焦问题 ElementUI框架 el-input和el-select组件失焦问题 el-input，el-select添加filterable属性后,如果都是打开一个弹窗页面，这两个组件的焦点事件并没有取消，就会出现如下问题（就是选择的下拉框会和弹窗同在一个z-index上，都是因为没有失焦引起的，Bug重现步骤：el-select添加filterable属性，选择值后，
el-button 点击默认不失焦解决
08-07
在使用element-ui框架中的`<el-button>`按钮组件时，点击按钮后会默认出现失焦的情况，但我们可以通过一些方式来解决这个问题。 首先，我们可以使用`@mousedown`事件来替代默认的`@click`事件。`@mousedown`事件在...
打造个性UI：Element UI主题定制全攻略
本文对Element UI的主题定制技术进行了全面的探讨，从介绍Element UI的基础知识开始，深入分析了其主题机制的设计理念与组件构成，以及主题定制的理论基础，包括CSS预处理器的介绍和样式覆盖原理。文中还详细阐述了...
小程序element-ui
最新发布
03-22
### 在小程序中使用 Element-UI 的挑战 Element UI 是专门为 Vue.js 设计的组件库，主要用于构建基于浏览器环境的 Web 应用程序[^3]。然而，微信小程序是一种完全不同的运行环境，其核心框架并非基于 Vue.js 或 ...
Element-ui多选组件横向对比：与主流UI框架的优劣分析
![Element-ui多选组件横向对比：与主流UI框架的优劣分析](https://mui.com/static/branding/design-kits/designkits4.jpeg) ...最终，本文综合评价了Element-ui多选组件的优缺点，并给出了选型建议和
【跨平台Vue组件开发】：Element-UI DateTimePicker步长适应性，一次开发多端适配
![【跨平台Vue组件开发】：Element-...本文针对Vue开发者在跨平台环境下开发和适配Element-UI DateTimePicker组件的挑战和实践进行了全面探讨。首先概述了跨平台Vue组件开发的基本理论和实践技巧，随后深入解析了DateTi
2024年Web前端最全【经验分享】显示文件扩展名，一个三非渣本的前端校招秋招之路
2401_84438654的博客
05-04 459
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端面试题汇总JavaScript前端资料汇总如何在.java文件和记事本之间通过改扩展名快速切换呢？首先打开此电脑（我的电脑）找到左上角的这个东西。
elementui中el-button点击后不失去焦点(按钮颜色不变)的解决方案
热门推荐
留着鼻涕敲代码
10-31 1万+
初次接触前端，初次使用vue，初次使用elementui，难免遇到坑。 使用el-button的时候，发现点击按钮后，按钮颜色仍然保持鼠标悬浮上去时候的效果，并没有恢复到正常状态 原因 el-button 的鼠标经过样式以及点击/获取焦点样式其实都是用css完成的。点击按钮后按钮会获得焦点CSS :focus 选择器触发； 也就是说获得焦点才会导致 el-button 高亮； 解决方案 你可能会想去掉 :focus这个选择器；或者覆盖 我告诉你！不可能！ 我尝试层叠掉那个样式但是color和boder
elSelect点击空白处无法收起下拉框（失去焦点并隐藏）
Scott_zt的博客
06-02 1万+
初次使用elSelect这个组件的时候，会碰到无法实现 当下拉菜单处于展开状态时，如不点击到组件上，无法收起下拉菜单的情况。 如下图，点击空白区域，只会触发html的默认事件 这里博主亲测可用的解决办法是：官方的Select组件提供了“blur” 方法，并借助 “v-click-outside”方法实现 在main.js中，进行全局注册自定义指令 Vue.directive(‘click-outside’, { bind: function (el, binding, vnode) { el.cl
按钮点击失去焦点
weixin_56868210的博客
09-06 1225
按钮点击失去焦点 <el-button @click="removeForm($event)">清除</el-button> // 清除表单 removeForm (e) { // 重新发送请求 this.loadQuestions() // 按钮失焦 e.target.nodeName === 'BUTTON' ? e.target.blur() : e.target.parentNode.blur() }
vue3 + element plus 使用el-button焦点问题 失焦操作
weixin_55042716的博客
11-11 3816
当我点击按钮，弹出了个提示弹窗，但是，当我弹窗关闭的时候，按钮还是处于激活的状态。点击按钮后会有激活的样式，除非点击其他地方才能取消掉，
react如何让ant中select组件失去焦点
茂茂的博客
03-17 3010
react如何让ant中select组件失去焦点 我们在开发时，经常遇见很多定制化的需求，这里我讲一下我处理select组件失去焦点的方法 首先，我使用的是函数式组件，介绍到一种东西叫做ref，相信大家应该都知道。它可以在dom节点上使用，可以引用真实的dom节点 我们给select组件一个ref属性 然后定义一下seleRef 在对其进行使用时，只需 即可调用当前组件dom的方法 ...
react antd protable内的Input输入框每次输入失去焦点
前端小白成长记
12-27 2572
最后发现是我将rowKey={RndNum}； RndNum是一个函数 // 获取一组十位数的随机数 function RndNum() { var rnd = ''; for (var i = 0; i < 10; i++) rnd += Math.floor(Math.random() * 10); return rnd; } 正是因为这个原因，导致我的输入框每次输入一个字符，就会失去焦点。 解决办法：rowKey="key"，rowKey内直接使用值，而不是传入一个函数 .
element-ui使用el-button去掉focus
wx258852的博客
11-30 7209
开发时使用el-button按钮点击之后不会恢复到原来的样式，需要出发其他地方的点击事件才会恢复，参考文章elementui中el-button点击后强制失去焦点（this.$confirm取消后按钮聚焦问题）_Kimser-优快云博客 我的代码： HTML： <el-button type="danger" style="margin-bottom:10px" @click="deleteRowAll($event)" ...
vue中失焦事件和点击事件冲突，如何解决？
一只琪琪子的博客
09-18 2474
①可以通过添加setTimeout来实现（但是有时候会出问题，会失效） //设备号失焦事件 blurInput(){ setTimeout(() => { this.isShowAuto = false },100) }, ②可以把点击事件修改成@mousedown鼠标按下事件（推荐这样解决） <div v-show="isShowAuto" class="auto"> <ul> .
element ui select 失焦事件
02-08
### Element UI Select 组件失焦事件处理 在使用 Element UI 的 `el-select` 组件时，可以通过监听 `blur` 事件来实现失焦事件的处理功能。此事件会在输入框失去焦点时触发。 下面是一个具体的例子展示如何绑定并处理 `blur` 事件： ```html <template> <div> <!-- 使用 @blur 来绑定失焦事件 --> <el-select v-model="selectedValue" placeholder="请选择..." @blur="handleBlur"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> </template> <script> export default { data() { return { selectedValue: '', options: [ { value: 'option1', label: '选项一' },
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值