カーソルキーメニューナビゲーションによるマウスオーバーイベントのトリガー

Question

複雑なシナリオのビットはここにあります。

私は親HTMLドキュメントに加えられた変更によって変更される埋め込みSVGグラフィックを持っています。 テキストボックスがあり、その中に検索を入力すると、ajax ULリストが入力されます。 マウスまたはカーソルキーでナビゲーションを選択できます。 リターンまたはマウスクリックでアイテムを選択しています。

これらはすべてうまくいきます。私はメニュー項目がマウスの上に乗っているときにメソッドを追加しました、それはSVGドキュメントに望ましい結果を表示します。

これは、PHPのajax呼び出しで生成されたときにliに追加されたonmouseoverイベントを介して行います。それは私ができる場所と場所をするために知っているので、私はSVG文書に渡すパラメータ（X、Y、テキスト、色）だということ、ここからそのまま

?><li class="<?=searchClass?>" onClick="win.hidePopup(); document.getElementById('<?=$field?>').value = '<?=$line->textName?>';" onMouseOver="svgCreateCircle(<?=$x?>,<?=$y?>,'red','<?=$line->textName?>');"><?=$img?><?=$line->textName?></li> 
<? 

のonmouseoverは、この時点で追加する必要がありますjqueryメソッドを使用して、mouseoverイベントを動的にアタッチしないでください。

私の問題は、キーボードのナビゲーションがマウスのナビゲーションと同じことをすることです。 li要素の上にマウスを移動すると、結果はグラフィックに完全に表示されますが、カーソルキーを使用して移動すると結果は完全に表示されません。私はマウスオーバーをシミュレートするすべての背景の変更などを取得しますが、それは自分自身のmouseoverイベントではありません。イベントをトリガーしようとすると、何も起こりません。

私が使用している

：

$("ul#itemSearchlist li").eq(menuitem).mouseover(); 
$("ul#itemSearchlist li").eq(menuitem).trigger('mouseenter'); 
$("ul#itemSearchlist li").eq(menuitem).trigger('hover'); 

が、これらの作業

Answer 1

のどれを使用すると、もはやの変化を追跡するためにmouseoverイベントに依存しているように、それはこのうち抽象化する必要がないかもしれません選択状態を表示し、代わりにJavaScriptで選択状態を追跡します。考えられるのは、どのアイテムが選択されているか（状態）を追跡し、イベントハンドラを登録して状態を更新するということです。そのため、mouseoverイベントでは、マウスオーバーイベントのターゲットを更新して、目的のアクション（円を作成）を実行します。キーボードイベントの場合は、DOMを介して、上のキーを押して、下のキーを押して、前後のリスト項目をそれぞれ取得することができます。状態を前または次のリスト項目に更新した後は、更新された選択状態に基づいて円を作成するという目的のアクションをもう一度実行できます。