html button点击后失去焦点,页面一个input输入框和一个取消按钮，input失去焦点时向后台发交易，点击取消按钮时不发交易...

html

取消

alt 静态页面

批注：在点击按钮的时候之前就执行了blur事件，所以这个时候是无法把发送到后台的接口给拦截住的。

给2个不同的元素进行的绑定事件，这个时候2个事件还出现了重叠。

经过查资料，终于找到2个方法

一个是点击的时候不执行blur，一个是让他发交易没等到结束我要把交易取消掉

php的接口

index.php

header("Content-type:application/json;charset=utf-8");

echo json_encode(array('msg' =>'get message success' ,'errorCode'=>'ok' ));

?>

方法1:

给btn一个onmousedown阻止默认事件，这时input的光标不会失去焦点，可以用原生的写法，这里用到了ajax就用jq快点

$('#input').on('blur',function(){

$.ajax({

type:'POST',

url:'index.php',

data:{},

success:function(data){

console.log(data);

}

});

});

$('#btn').on('mousedown',function(e){

e.preventDefault();

});

方法2:

调用对象上的 .abort() 可以在请求完成前挂起请求。

let xhr;

$('#input').on('blur',function(){

xhr=$.ajax({

type:'POST',

url:'index.php',

data:{},

success:function(data){

console.log(data);

}

});

});

$('#btn').on('click',function(){

xhr.abort();

});