Question

这对我来说似乎是一个愚蠢的问题，但我无法解决它......

为什么这样做：

  <div style="width:100px; height:100px; border:1px solid black;"
       onmouseover="alert('mouseover...');"
  >
  </div>

但这不是（在将鼠标指针移动到div字段并按下（任意）键之后）：

  <div style="width:100px; height:100px; border:1px solid red;"
       onkeydown="alert('keydown...');"
  >
  </div>

有什么想法吗？谢谢。

Answer 1

关键事件触发当前持有焦点的元素，而不是鼠标当前指向的元素。

默认情况下，div元素不是交互式控件。他们预计不会关注焦点。

您可以使用tabindex进行更改（之后您点击或标记要素以使其获得焦点），但它几乎总是表明您应该使用其他元素第一名（如textarea或按钮）。

tabindex全局属性是一个整数，指示元素是否可以获取输入焦点（可聚焦），是否应该参与顺序键盘导航，如果是，则在哪个位置。它可能需要几个值

Answer 2

@quentin：谢谢你的回答，它激发了我一个似乎有用的解决方案，我想在这里分享。

以上，首先描述的问题只是一个测试，我发现，为什么onkeydown不像onmouseover，你给了我答案。

我的实际问题是，当鼠标悬停在img元素上时，如果按下shift或控制键，我希望光标变为另一个符号。

这是我的解决方案：

我首先将元素添加到选项卡 - “索引”
然后在悬停时将焦点设置为
然后onkeydown按预期工作

这是代码：

  <img src="path/to/img.png"
       style="cursor:default;"
       tabindex="500"
       onmouseover="this.focus();"
       onkeydown="if (event.keyCode === 16  ||  event.keyCode === 17) this.style.cursor='move';"
       onkeyup="this.style.cursor='default';"
  >
  </img>

我确信它远非完美，事实上，它可能只是一个肮脏的黑客，但它是第一个想法。非常感谢任何评论，谢谢。

为什么onmouseover工作，但不是onkeydown？

2 个答案: