1

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

4

3 回答 3

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')
    }
});

演示在这里

于 2013-08-21T20:03:30.960 回答
1

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

于 2013-08-21T20:04:09.673 回答
1

看看这个应该可以解决你的问题。 堆栈溢出答案

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

于 2013-08-21T19:54:06.730 回答