页面一个input输入框和一个取消按钮，input失去焦点时向后

html

<input type="text" id="input">
<button id="btn">取消</button>

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

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

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

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

php的接口

index.php

<?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();
});