Question

我有一个可编辑的元素，我正在跟踪.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。

Answer 1

在这方面已经解决了它应该解决你的问题。 Stackoverflow Answer

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

Answer 2

这将有效：

$('#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

Answer 3

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

.blur（）和.click（）事件重叠

3 个答案:

演示 here