.blur() 和 .click() 事件重叠答案

【问题标题】：.blur() and .click() events overlapping.blur() 和 .click() 事件重叠
【发布时间】：2023-03-09 10:00:01
【问题描述】：

我有一个可编辑的元素，我正在跟踪 .blur() 事件以使其不可编辑。我还有另一个元素应该充当“确定”按钮，表示用户完成了编辑。这是 HTML（#input 是可编辑元素，#ok 是 OK 按钮）：

<div id='container'>
    <span id='input' contenteditable='true'></span>
    <a href="#" id='ok'></a>
</div>

还有 CSS：

#container {
    border: 1px solid black;
    width:100px;
    position:relative;
}
#input {
    display: inline-block;
    width: 80px;
}
#ok {
    display: inline-block;
    width: 20px;    
    height: 20px;    
    background: green;
    cursor:pointer;
    position: absolute;
    right: 0;
}

我绑定了两个事件：

$('#ok').click(function(){alert('it is clicked')});
$('#input').blur(function(){alert('blur is detected')});

但是每当我点击 OK 按钮时，都会触发 .blur() 事件，这不是我想要的行为。此外，在我收到有关 .blur() 事件的通知后，我没有收到有关我认为应该发生的 .click() 事件的通知，因为这是事件堆栈中的下一个事件。如果单击按钮，是否可以避免获得 .blur() 事件？这是代表案例的jsFiddle。

【问题讨论】：

jQuery Stop .blur() event when clicking "submit" button的可能重复
你为什么不使用代替？ .blur() 是表单项的原生事件。
@peterchon，因为我不使用表格

标签： jquery

【解决方案1】：

这将起作用：

$('#input').focus();
$('#ok').click(function () {
    alert('it is clicked')
});
var over_click;
$('#ok').mouseenter(function () {
    over_click = true;
}).mouseleave(function () {
    over_click = false;
});
$('#input').blur(function () {
    if (!over_click) {
        alert('blur is detected')
    }
});

演示here

【讨论】：

【解决方案2】：

看看这个应该可以解决你的问题。 Stackoverflow Answer

基本上只要你尝试从输入框出来然后模糊就会触发，一旦你按下确定然后你可以点击按钮，但上面的链接会告诉你如何解决这个问题

【讨论】：

【解决方案3】：

也许可以试试$('#container').blur(function(){alert('blur is detected')});

【讨论】：