1

注意: 問題の原因が判明しました。最初の回答へのコメントをお読みください。

ユーザーが呼び出すまで非表示になっているもののドロップダウンリストがあります。それは次のようなものです：

<div>
    <button></button>
    <ul>
        <li></li>
        ....
        <li></li>
    </ul>
</div>

基本的な考え方:

ユーザーが上記のコードに示されているボタンを押すと、リストが表示されます。

リストをキーボードでナビゲートできるようにする必要があります。
つまり、リストが開いているときにユーザーが上下に押すと、適切な li が選択されます (代わりにマウスがその上に置かれているかのように)。

この機能をリストに付与するイベント リスナーは、リストが表示されるときにアタッチし、リストが再び非表示になるときに削除する必要があります。

Bitbucket がドロップダウン リストに対して行うことと似ていますが、さらに単純です。

問題：

イベントリスナーを ul にアタッチしてから div 要素にアタッチしようとしましたが、前者が効果がなかったときに役に立ちませんでした。
コードはこれ

オンショー

this.<ul or div element here>.addEventListener('keydown', this.keyboardNavigation.bind(this));

オンハイド

this.<ul or div element here>.removeEventListener('keydown', this.keyboardNavigation.bind(this));

コールバックは次のようになります

function keyboardNavigation(e) {
    console.log('foo');
}

注:「this」は、div と ul の両方がプロパティであるオブジェクトであり、コールバック関数は実際にはそのオブジェクトのメソッドです。

質問 1:イベントを ul 自体または親 div にアタッチすると
、イベントが機能しないのはなぜですか?keydown

とにかく、これらはうまくいかなかったので、リスナーをドキュメントに添付することにしました。
オンショー

document.addEventListener('keydown', this.keyboardNavigation.bind(this));

オンハイド

document.removeEventListener('keydown', this.keyboardNavigation.bind(this));

同じコールバック。

これが機能している間、イベント リスナーがドキュメントから削除されていないことに気付きました。後で、別のタスクのためにドキュメントに添付した別のイベント リスナーも、そのタスクが完了しても削除されない
ことに気付きました。keydown

質問 2:
イベント リスナーが削除されないのはなぜですか? 何が間違っているのか理解できません。追加されたものとまったく同じイベントでまったく同じコールバックを削除しています。

どんな助けでも大歓迎です。

注: jQueryを使用してみましたが.on()、.off()代わりにここで提案されているように、jQuery を使用したくありませんが、同じことが起こっています。

4

1 に答える 1

2

私の考え：

1 フォーカスがないため、DIV または UL がキーボード イベントを取得していないためですか? ドキュメントは常にバブルイベントを取得していますか?

これをテストするには、DIV/UL をクリックして入力し、キーボード イベントがトリガーされるかどうかを確認します。

ドキュメントへのバインド-ユーザーがクリックした後に入力を開始できるようにする場合-は、ここで行うのが正しいことだと思います。

2 これは、作成した同じハンドラーを削除していないためですか? 最初の bind 呼び出しで作成したハンドラーへの参照を保持し、この参照を remove 呼び出しに渡す必要があります。そうしないと、別の (別の) ハンドラーを作成して、それを削除するように求められます。

例えば：

var f = this.keyboardNavigation.bind(this);
document.addEventListener('keydown', f);
document.removeEventListener('keydown', f);
于 2013-06-21T03:57:43.873 に答える