blur事件和ajax,js关于blur事件阻塞click事件

出现场景：

页面有一个输入框A绑定了blur事件，且这个事件里面需要用到ajax请求数据，然后有一个按钮B绑定了点击事件；

在A里面输入完信息后，还没失去焦点的时候点击B，这个时候发现只执行了A的blur事件，而B的click事件没有触发。(ps: 若blur事件仅仅只是普通操作，没有ajax异步请求的话是没问题的)

失焦点击测试

// -----------------------

clickTest(){

console.log('clickTest');

blurTest(){

console.log('blurTest');

}

// -----------------------

// 结果正常：

// blurTest

// clickTest

blurTest(){

console.log('blurTest');

this.$ajax.get('/test')

.then(res=>{

console.log('blur请求完成')

})

}

// 结果：(不会执行点击事件)

// blurTest

// blur请求完成

网上搜到的三种解决办法,(个人觉得都不适合)：

1.blur事件加延时，让click先执行，缺点：click事件虽然执行了，但是在blur请求完成前执行的，不能获取到blur请求后的最新数据(pass)

2.给按钮B加个mousedown，并在mousedown里面阻止默认事件e.preventDefault()，因为mousedown会优先于blur事件。缺点：这样点击事件会执行，但是blur事件不会触发(pass)

另外，若是在vue ui框架element-ui上的标签加事件，@mousedown需要加上.native关键字，不然不会触发

3.按钮B上的点击事件换成mousedown事件，这样两者都会执行，但是mousedown(原click)先执行，类似第一种加延时处理。缺点：除了第一点说的，mousedown事件会在鼠标按下去的一瞬间执行，不是很友好。(pass)

发现上面三种都不好用，于是本人想到，能不能在点击的时候获取到鼠标点了谁，如果被点击的元素有click事件，再在blur的回调函数里面执行(以下方法若有不合适的地方，希望给与指出)

clickTest(){

console.log('clickTest');

this.$ajax.get('/test')

.then(res=>{

console.log('click请求完成')

})

blurTest(){

console.log('blurTest');

this.$ajax.get('/test')

.then(res=>{

console.log('blur请求完成')

if(arguments[0] && arguments[0].relatedTarget && arguments[0].relatedTarget.click){

arguments[0].relatedTarget.click();

}

})

// -----------------------------

// 结果OK：

// blurTest

// blur请求完成

// clickTest

// click请求完成

blur事件和ajax,js关于blur事件阻塞click事件相关推荐

解决JS双击事件dblclick触发时，同时会执行click事件中的语句
双击dblclick事件,同时会执行click事件中的语句,当需要为一个元素同时添加这两个事件时,显然这不是我们想要的结果,举个实例,在最近做的canvas开发中使用鼠标画区域,鼠标单击一下开始画,鼠 ...
html事件中写js,html标签中绑定触发事件与js中绑定触发事件写法上的区别
html> js中方法名后加括号和不加口号的区别按钮 var test = function(){ var span = document.createElement("span&q ...
JS解决因循环绑定click事件失效
很多js新手都会在绑定事件遇到绑定失效的问题. 大致思路就是,比如用一个循环让对应的button按钮绑定对应的事件. 比如这样 <button id="1">1 < ...
blur事件与click事件的冲突
定义: blur事件:当元素失去焦点时发生 blur 事件 click事件:当单击元素时,发生 click 事件在开发中会发现存在以下场景,点击当前输入框以外的其他元素.此时输入框失焦触发blur事 ...
[js点滴]JavaScript之文档事件08
文档事件 beforeunload事件,unload事件,load事件,error事件,pageshow事件,pagehide事件以下事件与网页的加载与卸载相关. (1)beforeunload事件 ...
【前端】JS的BOM和DOM，事件，表单验证案例
先看小练习1:开关灯用到的Dom相关知识点 * 功能:控制html文档的内容 * 获取页面标签(元素)对象:Element* document.getElementById("id值&qu ...
ocx js php,JavaScript_JS实现OCX控件的事件响应示例，JS支持OCX控件的事件（event）， - phpStudy...
JS实现OCX控件的事件响应示例 JS支持OCX控件的事件(event),当OCX控件定义的事件发生时,JS可以捕获该事件并对事件进行相应的处理. 个人理解,其实就是事件的响应由谁来完成,OCX控件自 ...
js阻止子元素事件_阻止 JS 的冒泡事件
用了一段时间google inbox,赶脚mail task的样式很酷炫,于是也模仿着做了一个task管理系统. Google task有个behavior是点击页面别处,当前展开的mail就会收起. ...
JS阻止冒泡和元素默认事件
JS阻止冒泡和元素默认事件文章目录 JS阻止冒泡和元素默认事件 1.JS阻止冒泡 :stopPropagation() 2.阻止元素默认事件行为 preventDefault() onclick + ...

blur事件和ajax,js关于blur事件阻塞click事件

blur事件和ajax,js关于blur事件阻塞click事件相关推荐

最新文章

热门文章