CODEWITHSUNDEEP
javascripthtmlevents
schogol
schogol

Reputation: 63

why is onmouseover working, but not onkeydown?

This seems to be a stupid problem to me, but I can not solve it....

Why does this work:

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

but this not (after moving the mouse pointer into the div field and pressing a (any) key):

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

Any idea? Thank you.

Upvotes: 1

Views: 244

Answers (2)

schogol
schogol

Reputation: 63

@quentin: thank you for your answer, it inspired me to a solution, which seems to work, and which I want to share here.

The above, first described problem was just a test for me to find out, why onkeydown does not behave like onmouseover, and you gave me the answer to that.

My actual problem was that I want the cursor to change to another symbol when hovering over an img-element, IF the shift or the control key is pressed.

This is my solution:

  • I first add the element to the tab-"indexing"
  • then I set the focus to it when hovering it
  • then onkeydown works as expected

and this is the code:

  <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>

I'm sure it is far from being perfect, in fact, it's probably just a dirty hack, but it is a first idea. Any comments would be much appreciated, thank you.

Upvotes: 0

Quentin
Quentin

Reputation: 943100

Key events fire on the element which currently holds the focus, not the element the mouse is currently pointing to.

By default, div elements are not interactive controls. They aren't expected to hold the focus at all.

You can change that with tabindex (after which you click on or tab to the element to give it focus), but it's almost always a sign that you should be using a different element in the first place (such as a textarea or a button).

The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values

Upvotes: 4

Related Questions