Question

这里有一个复杂的场景。

我有一个嵌入的SVG图形，将通过对父HTML文档所做的更改来更改。我有一个文本框，当您在其中键入搜索时，它将填充ajax UL列表。可以通过鼠标或上下光标键选择导航。通过返回或鼠标点击选择项目。

所有这些都运作良好。我在用鼠标悬停菜单项时添加了一个方法，它将在SVG文档中显示所需的结果。

我是通过在PHP ajax调用中生成的添加到li的onmouseover事件来执行此操作的。

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

此时必须添加onmouseover，因为它是从这里我将参数（x，y，文本，颜色）传递给SVG文档，因此它知道要放置什么以及在哪里我不能使用用于动态附加鼠标悬停事件的jquery方法。

我遇到的问题是让键盘导航与鼠标导航做同样的事情。将鼠标移到li元素上将完美地显示图形中的结果，但使用光标键导航则不会。我得到所有背景更改等模拟鼠标悬停但不是鼠标悬停事件它是自己的。尝试分解事件也没有任何作用。

我用过：

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

但这些都不起作用

Answer 1

可能有必要将其抽象出来，以便您不再依赖鼠标悬停事件来跟踪选择状态的变化，而是自己在JavaScript中跟踪选择状态。我们的想法是，您将跟踪选择的项目（状态），并注册事件处理程序以更新状态。因此，在mouseover事件中，您将更新mouseover事件目标，并执行所需的操作（创建圆圈）。在键盘事件的情况下，您将能够分别通过DOM，向上按键和向下按键检索上一个和下一个列表项。将状态更新为上一个或下一个列表项后，您将能够再次执行基于更新的选择状态创建圆的所需操作。

通过光标键菜单导航触发鼠标悬停事件

1 个答案: