点击按钮触发输入框onblur时 如何阻止本次按钮onclick执行

你之前尝试的所有拦截方法失效，核心原因是事件传播机制的限制：

• blur事件的触发目标是聚焦状态的输入框，所有针对blur事件的阻断方法（preventDefault、stopPropagation、stopImmediatePropagation），都只能阻断blur事件本身的DOM传播流程，完全无法影响后续触发的、属于按钮节点的独立click事件
• 从输入框点击按钮时，浏览器的固定触发顺序是：先执行输入框的blur回调，再执行按钮的click回调，两个事件前后独立触发，不存在传播路径交叉，自然没法靠事件阻断API拦截
• 目前出现“第一次点击只输出blur、第二次点击才输出div”的现象，是因为第一次点击动作发生时，输入框焦点被抢占，第一次点击的事件被焦点切换打断，没有正确命中按钮，需要第二次点击才能触发按钮的click回调。

核心逻辑是通过时间标记识别“blur触发后紧跟着的那次关联click”，在click回调入口直接拦截，全程不改动blur和click本身的正常执行时机，不会引入校验失效的副作用。
实现步骤：

• 定义全局标记变量，记录blur事件的刚触发状态
• 在blur回调中把标记设为有效，设置极短的定时器在click触发完成后自动重置标记，避免影响后续的正常按钮点击
• 在按钮的click回调最开头判断标记状态，如果标记为有效，直接终止回调执行，忽略这次点击

修正后的完整示例代码：

<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" id="fname" onblur="myFunction(event)"> 
<button onclick="calldiv(event)">Click</button>
<script>
let blurFlag = false;
let resetTimer = null;
function myFunction(event) {
    // 标记blur刚触发
    blurFlag = true;
    // 清除之前的定时器，避免重复执行
    if(resetTimer) clearTimeout(resetTimer);
    // 20ms后重置标记：刚好覆盖blur之后紧跟的click触发周期，用户无感知
    resetTimer = setTimeout(() => {
        blurFlag = false;
    }, 20);
    console.log("blur");
}
function calldiv(event) {
    // 如果刚触发过blur，直接忽略这次click
    if(blurFlag) return;
    console.log("div");
}
</script>
</body>
</html>

注意：不要为了拦截直接把blur回调的逻辑用setTimeout延迟执行，这种方式会打乱输入框失焦校验的正常逻辑，容易出现输入内容没校验就触发按钮逻辑的问题。

• 输入框处于聚焦状态时点击按钮：控制台仅输出"blur"，紧跟的关联click事件被标记拦截，不会输出"div"，完全符合需求
• blur事件触发20ms后（标记自动重置）再点击按钮：控制台正常输出"div"，按钮的正常交互不受任何影响
• 20ms的延迟符合浏览器事件循环的最小执行间隔，用户完全感知不到卡顿。

内容的提问来源于stack exchange，提问作者Supriya Kumari