3

この質問は、この1つのオートコンプリートに関連しています。最初の項目は、ユーザーがタブキーを入力したときにのみフォーカスされます。

ユーザーがjqueryUiを使用してタブキーを入力したときにのみ最初のアイテムに焦点を合わせるには、次のようなものを作成できますhttp://jsfiddle.net/uymYJ/8/（1）。

この実装の悪い点は、イベントオブジェクトの変更ですevent.keyCode = $.ui.keyCode.DOWN;。
実際、このようにすることで、このイベントの他のすべてのリスナーに影響を与えます。後で実行されるkeydownイベントのすべてのリスナー（すべての委任されたリスナーを含む）は、event.keycodeを$.ui.keyCode.ENTERとして認識します。

私の質問は次のとおりです：
1）私の懸念はthe modification of the event object正当化されていますか？そうでない場合はなぜですか？
2）同じ結果を達成するための別の方法を提案できますか？
3）@AaronDigullaによって提案されているように、1つのオプションはを使用することである可能性がありますdocument.createEvent()。このコンテキストでこのメソッドを使用する適切な方法は何ですか？次のコード（3）を試しましたが、機能しません。

PS：
オートコンプリート（2）に関するコードは次のとおりです。

（1）

$("#box").keydown(function(e){
    if( e.keyCode != $.ui.keyCode.TAB) return;

   e.keyCode = $.ui.keyCode.DOWN;
   $(this).trigger(e);

   e.keyCode = $.ui.keyCode.ENTER;
   $(this).trigger(e);

   $(this).siblings("input").select();
});

（2）

function (e) {
    var f = typeof e == "string",
        g = Array.prototype.slice.call(arguments, 1),
        h = this;
    return e = !f && g.length ? a.extend.apply(null, [!0, e].concat(g)) : e, f && e.charAt(0) === "_" ? h : (f ? this.each(function () {
        var d = a.data(this, c),
            f = d && a.isFunction(d[e]) ? d[e].apply(d, g) : d;
        if (f !== d && f !== b) return h = f, !1
    }) : this.each(function () {
        var b = a.data(this, c);
        b ? b.option(e || {})._init() : a.data(this, c, new d(e, this))
    }), h)
}

（3）

$("#box").keydown(function(){

    e = document.createEvent('KeyboardEvent');
    e.initEvent("keydown", true, true);
    $(this).dispatchEvent(e);

    if( e.keyCode != $.ui.keyCode.TAB) return;

   e.keyCode = $.ui.keyCode.DOWN;
   $(this).trigger(e);

   e.keyCode = $.ui.keyCode.ENTER;
   $(this).trigger(e);

   $(this).siblings("input").select();
});
4

1 に答える 1

1

正解です。イベントが変更され、すべてのリスナーに変更されたキーコードが表示されます。

しかし、もっと重要な質問は、これは危険ですか？

これに答えるには、どのリスナーが要素にバインドされているかを知る必要があります。確かに、オートコンプリートプラグインのすべてのリスナーは、この状況を処理するように設計されています。彼らにとって、これは大丈夫です。

独自のイベントをウィジェットにバインドすると、問題が発生します。

解決策は、新しいイベントを作成し（document.createEvent()+すべての重要な属性をコピーして）、元のイベントの変更を回避するためにクローンを送信することです。

いくつかのリンク：

于 2012-08-21T07:54:44.377 に答える