1

1つまたは複数のクリック可能なアイテム (入力フィールドやボタンなど)blurを含むコンテナー (この場合はテーブル セル) にイベントを関連付けています。

私のセル埋め込みフォームでは、2 つのことが起こります。入力フィールドのいずれかで値が変更されると、フォームが処理されます。値が変更されていないのにフォーカスが失われた場合、フォームはクリアされます。

blurユーザーがセル内の別の項目をクリックした場合、セルを変更したくありません。

これが私が試みたことです-blurイベントでフォーカスされた子供の数をチェックします。

HTML

<table>
    <tr>
        <td id="edit">
            <input type="text"></input>
            <input type="checkbox"></input>
            <button>Test</button>
        </td>
    </tr>
</table>

JavaScript

$('table').on('change', '#edit input', function () {
    alert('An input field has changed');
});

$('table').on('blur', '#edit', function () {>
    if ($(this).children(':focus').length == 0) {
        alert('The user has clicked away from the form');
    } else {
        alert('The user hasn\'t finish editing yet');
    }
});

しかし残念なことに、フォーカスされた子の長さは常に 0 として報告されます!

それから私は試しました

$('body').not('#edit, #edit > *').on('focus', function () {
    alert('The user has clicked something else');
});

しかし、これはまったく機能しません！また、ユーザーが変更を加えた場合にフォームがキャンセルされないように、ハンドラーのchange前にハンドラーを起動する必要があるため、それについても疑わしいです。focus

怠惰な子供のための jsfiddle は次のとおりです: http://jsfiddle.net/QmVsr/

4

1 に答える 1

1

可能な解決策は、タイマーベースのアプローチを使用することです

$('table').on('blur', '#edit', function () {
    var timer = setTimeout(function(){
        console.log('The user has clicked away from the form');
    }, 20);
    $(this).closest('td').data('blurTimer', timer)
}).on('focus', '#edit', function () {
    clearTimeout($(this).closest('td').data('blurTimer'))
});

デモ:フィドル

注: デバッグ中は、アラートではなくコンソール ロギングを優先します

于 2013-08-30T16:13:19.083 に答える