How to trigger a onkeypress event while mouseover event is active in javascript

Question

I want onkeypress event to only work when mouseover event is active.

For example: onkeypress shouldn't work if my mouse pointer isn't hovering over an specific element.

document.getElementById("image").onmouseover=function(){
 document.onkeypress=function(event){
 event = event || window.event;
 var key = event.key || event.which || event.keyCode;
 if(key===84){ //this is for 'T'
    doThing(); 
       }
    }
}

I want something like this. But the code is not working. Sorry, if the question is not clear. I'm new at javascript so please forgive my mistakes.

The interaction you are describing doesn't make a lot of sense to me. Since keypress events are sent to the element that has "focus", the element being hovered over and the element receiving the keypress event really don't have much to do with each other. — gforce301, May 05 '17 at 15:37
BTW `document` has no method called `getElementsById` (since IDs are unique). — Mikey, May 05 '17 at 15:39
i am trying to achieve something like Hover Zoom (chrome extension). Where, when you hover over a image and press 's' you can save that image. — Unique Kiddo, May 05 '17 at 15:41
This [example](http://stackoverflow.com/a/7412302/6224482) using CSS should get you started with the zoom. Then all you need is the `onkeypress` event to save — Sandman, May 05 '17 at 15:51

score 3 · Answer 1 · answered May 05 '17 at 15:53

Create a flag to indicate when you are over the image or not. There are many ways. In this example, I am using HTML5 data-attribute to hold the flag.

Then when you press the key, check whether the flag is on to do your next step.

// set a flag when you are over the image
image.onmouseenter = function(){
   console.log('set flag');
   this.dataset.flag = 'true';
}
// unset the flag when you leave the image
image.onmouseleave = function(){
   console.log('unset flag');
   this.dataset.flag = 'false';
}

document.onkeypress = function (event) {
    event = event || window.event;
    var key = event.key || event.which || event.keyCode;
    console.log('keypressed', key);
    if (key === 'T' && image.dataset.flag && image.dataset.flag === 'true') { 
        console.log('do something');
    }
}

<img id="image" src="https://images.pexels.com/photos/31418/pexels-photo.png?h=350&auto=compress&cs=tinysrgb" alt="" width="200">

score 1 · Accepted Answer · answered May 05 '17 at 15:50

How about something like this? Perhaps you can extend this to help solve the problem.

var isHovered = false;

function keyDown(event) {
  if (!isHovered) return;
  var key = event.keyCode;
  if(key === 84) {
    console.log('we are hovered and pressing T!')
  }
  
}

function hoveredBox() {
  isHovered = true;
}

document.addEventListener('keypress', keyDown);
document.getElementById('elem').addEventListener('mouseenter', hoveredBox);
document.getElementById('elem').addEventListener('mouseleave', function() {
  isHovered = false;
})

#elem {
  height:100px;
  width:100px;
  background-color:red
}

<div id="elem"></div>

How to trigger a onkeypress event while mouseover event is active in javascript

2 Answers2