vue 2个input的blur都触发了事件,导致死循环

2024-11-03

吐血bug-- 多个input框接连blur事件导致alert接连弹出

本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug... bug描述: elementUi + Vue 技术需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后需要一个弹框给出提示信息. 触发:在点击一个input框后接着点击另一个input框,使第一个input框的失去焦点为第二个input框的获得焦点,触发alert,无论点击确定还是X都会再次弹出blur事件中的alert 问题分析: 第一个input框在失去焦点时触发了blur事件,使得alert弹

IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题

先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type="text" placeholder="请输入纳税人识别号" v-model="invBuyer.TaxCode" /> 文本框使用的是vue的v-model双向绑定,在android中是ok的,在IOS上不行, 导致问题出现的原因是IOS自带输入

input标签内容改变触发的事件

原生方法 onchange事件 <input type="text" onchange="onc(this)"> function onc(data){ console.log(data.value); } onchange事件在内容改变且失去焦点的时候触发.即,失去焦点了内容未变不触发,内容变了未失去焦点也不实时触发.js直接更改value值时不触发 oninput事件 <input id="inp" type="t

解决Enter键与input 、a标签触发的事件的冲突

无论是 <button type="button" onclick="console.log('123');">123</button> 还是 <a href="#" onclick="console.log('123');">测试链接</a> 在点击并且触发完事件后,当我们继续按下enter键时.会不断的触发点击事件.解决方案如下: $(document).on('keydo

Vue 添加外部的时间插件不触发v-model事件更改数据

使用的jquery日期插件最终问题是在选择完成日期后并未激活 oninput事件,所以也没有激活v-model 去改变date 解决思路: 去插件js文件中,在赋值给dom的时候添加模拟输入事件便可例如jquery写法 $(element).trigger("input");

Wpf TextChanged事件导致死循环，事件触发循环问题

1.实例: 说明:当TextBox控件的Text内容发生变化时,TextChanged事件触发,并且会立即同步执行. 基于这个特点,设置一个全局变量标识,ChangeTxtB,如果是正在修改txtB的时候,不执行txt_TextChanged事件内容. 这样就可以解决TextChanged事件带来的死循环问题. //比特 private void txtb_TextChanged(object sender, TextChangedEventArgs e) { if (ChangeTxtB) /

jquery移除、绑定、触发元素事件使用示例详解

这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind("click"); //移除click $('#btn').unbind(); //移除所有对于只需要触发一次的,随后就要立即解除绑定的情况,用one() $('#btn').one("click",function(){.......}); 触发操作trigger()

jquery移除、绑定、触发元素事件

unbind(type [,data]) //data是要移除的函数 $('#btn').unbind("click"); //移除click $('#btn').unbind(); //移除所有对于只需要触发一次的,随后就要立即解除绑定的情况,用one() $('#btn').one("click",function(){.......}); 触发操作:trigger() 方法触发被选元素的指定事件类型. $('#btn').trigger("clic

ztree在onCheck()方法中防止因触发联动关系导致页面多次渲染而卡死的问题

这几天在项目中遇到了要使用树形选择框, 而且要求比较复杂,具体叙述如下: 首先是有个选择框,左边选择是适用的商品,右边显示已经选择的商品.也就是说,左边每次勾选操作,都要触发一个事件去刷新右边的页面, 而且,左边商品如果选择大类,则右边显示大类,其下小类都不显示也就是说有父子联动的关系. 刚开始的时候, 选择了使用bootStrap的tree_view这个插件,一开始还好,基本成型,后来测试时才发现问题,,当数据量很大的时候,,这个插件用起来很卡很卡,,而且又加了个带搜索功能,这个插件就显得有

file类型input框设置上传相同文件，并都可以触发change事件。

在使用file类型input框是,删除了第一次上传到文件,再次上传相同文件,无法触发change事件,所以在删除的js上添加如下js代码: document.getElementById('fileUpload').value = null;

JS改变input的value值不触发onchange事件解决方案（转）

方法(一)(转载的网络资料) 需要了解的知识首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获. onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件. onpropertychange 是IE浏览器的专属方法了解这一点后我们发现onpropertychange的效果就是我们想要的,可是很遗憾,它只在IE下有效果.我们能不能找

改变input的值不会触发change事件的解决思路

通常来说,如果我们自己通过 value 改变了 input 元素的值,我们肯定是知道的,但是在某些场景下,页面上有别的逻辑在改变 input 的 value 值,我们可能希望能在这个值发生变化的时候收到通知.于是我们想到了 onchange 事件,然而我们遗憾的发现,onchange 事件却并不会被触发,因为onchange事件触发是有条件的. onchange 事件的触发条件 onchange 触发需要三个步骤: input 元素获得焦点 input 元素的值发生变化 input 元素失去焦点

input 的blur事件之后button的onclick事件不执行解决方案

最近发现网页程序中有个BUG,就是在input标签输入框中输入完数据后,直接点击“取消” 按钮的时候.出现网页崩死的情况: 经过小主酸菜我,各种方法的尝试后,找到一个初步可以解决的方案,在这里分享给大家: 首先,分析一下原因:input标签直接离开后,触发的事件是input标签的blur事件:然后直接去点击了取消按钮,执行button事件. 由于js是单线程的所以就出现了问题,现在需要让blur先执行验证,然后在触发click事件. 所以:咱们的解决方案就是,要让他blur事件先验证了,然后再执

input的type=file触发的相关事件

与input相关的事件运行的过程.添加了一些相关的方法测试了一下.input的type=file的运行流程. 我们书写了mousedown,mouseup,click,input,change,focus,blur绑定到了input上面,模拟点击选择了一个文件,触发事件的流程是下面这样的: (1)mousedown(2)focus(3)mouseup(4)click(5)blur(6)focus(7)change 首先触发了鼠标按下事件,然后就是焦点到了input上面,然后鼠标抬起,触发clic

input输入框file类型第二次不触发onchange事件的解决办法，简单有效

在网上看了很多办法,现在将网上大部分说法总结如下: 网上说法: 原因:选择一次后onchange事件没有绑定到input标签上: 解决办法:拷贝一份input标签的副本,每次选择后对原input标签进行替换. 我觉得网上给出的办法每次都要做回调,太麻烦了.应该还有更简单的做法. 探究input输入框file类型第二次不触发onchange事件的根本原因,可以知道:(1) 原来是 ajaxFileUpload 插件造成的,它会把原来的file元素替换成新的file元素,所以之前绑定的chan

input中blur失去焦点事件与点击事件冲突时如何解决

方法一使用setTimeout $(function(){ $(".cy-name-input input").on({ focus:function() { $(".cy-close").css('display','block'); }, blur:function() { setTimeout(function(){ $(".cy-close").css('display','none'); },0) } }) $(".cy-c

input禁止输入后，触发事件，在苹果手机的页面会滚动

在vue中,<input type="text" readonly="readonly" @click=""/>,点击跳转页面. 在苹果手机微信中,会滚动会顶部,才跳转.滚动你喵呀. 经过各种测试,都不行,后来搜索了input的禁止输入方法,发现: 换成这样既可防止苹果微信浏览器滚动,<input type="text" disabled="disabled" @click="&

vue中触发键盘事件的两种方法和如何自定义键位事件，完整代码！

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

input中的内容改变时触发的事件

input中的内容改变时触发的事件 1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发:onpropertychange事件是实时触发,每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件是IE专有. 2. oninput事件与onpropertychange事件的区别: oninput事件是IE之外的大多数浏览器支持的事件,在value改变时实时触发,但是通过js改变value时不会触发

[jquery] input值发生变化则触发

$("#a").val("你好").trigger("change"); $("#a").bind("change", function(){ alert("你触发了change事件");}); 这样,你赋值到input上,然后trigger就会模拟触发change事件,然后你绑定的change事件就会执行.

'input propertychange' 当输入框文字改变时触发的事件!

$('.amount_input').bind('input propertychange', function() { console.log(2); $('.list label').removeClass('clicks'); $('.list label').removeClass('click'); $('.list label .arrow-down').remove(); }); .bind()事件为点击鼠标触发的事件

vue 2个input的blur都触发了事件,导致死循环

热门专题