1

.blur() イベントを追跡して編集できないようにする編集可能な要素があります。また、ユーザーが編集を終了したことを示す「OK」ボタンとして機能する別の要素もあります。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;
}

2 つのイベントがバインドされています。

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

これを見て、問題を解決してください。 スタックオーバーフローの回答

基本的に、入力ボックスから出ようとするとすぐにぼかしがトリガーされ、[OK] を押すとボタンをクリックできますが、上記のリンクはこの問題を解決する方法を示しています

于 2013-08-21T19:54:06.730 に答える