7

ええと、そういうことが起こります。

$('.js-custom-dropdown').find('.custom-dropdown-unfolded').toggle();
$('.custom-dropdown-btn, .custom-dropdown-btn-unfolded').keydown(function(event){
    if (event.keyCode === 13) {
        openDropdown($(this));
    }
}).click( function(){
    openDropdown($(this));
});

function openDropdown (element){
    element.parents('.js-custom-dropdown').find('.custom-dropdown-unfolded').toggle();
    console.log($(this))
}

ドロップダウンボタンをクリックすると、openDropdown関数が1回実行されますが、ボタンに移動してEnterキーを押すと、関数が2回呼び出されます。これはチェーンと関係があると思いますが、私はこれに不慣れで、jQueryのデザインパターンを完全には理解していません。ハンドラーで関数を2回呼び出すこともできますが、それでkeydown問題は解決しますが、..ご存知のとおりです:)

コードの何が問題で、何がそのような動作を引き起こすのか説明していただけますか？

4

2 に答える 2

4

これは、html5ユーザーインタラクションの仕様に依存します。tabIndexを持つ要素のHTML仕様を見ると、タブインデックスを持つ要素の場合、Enterキーを押すとクリックイベントが発生することがわかります。

それがこの振る舞いの原因だと思います。古い（html 5に準拠していない）ブラウザで試して、これが当てはまるかどうかをテストできます。

編集（ポスターの要求に応じて）：@ Terryからの回答は、発生している問題を解決する方法を提供します。イベントでjqueryの「preventDefault」を使用すると、Enterキーを押したときに2回ヒットするのを停止します。

于 2013-03-27T09:23:17.020 に答える
1

キーダウン時にクリックイベントをトリガーするには、次を使用します。$(this).trigger('click');キーダウン時にデフォルトのアクションを防止します。

$('.custom-dropdown-btn, .custom-dropdown-btn-unfolded').keydown(function (e) {
    if (e.keyCode === 13) {
        $(this).trigger('click');
        e.preventDefault();
    }
}).click(function () {
    openDropdown($(this));
});

これが概念実証フィドルです：http：//jsfiddle.net/yTuR3/

于 2013-03-27T09:23:40.490 に答える