Hi I have multiple divs on the page. I want to raise an alert based on a user hovering over one of the divs and pressing control z. I need to in effect alert out what is in the span dependant upon which div the user is hovered over on.

I have tried with getbyId the problem arises with multiple elements. I am unsure if i need to bind every element.

    <div class="mydiv">Keypress here!<span>test</span></div>
    <div class="mydiv">Keypress here!<span>test1</span></div>

var pressed = false;

onload = function(e) {
    var myElement = document.getElementsByTagName('div');

    function keyaction(e, element) {

        //  var originator = e.target || e.srcElement;
        if (e.charCode === 122 && e.ctrlKey) {
            //myElement.innerHTML += String.fromCharCode(e.charCode);
            alert(true);
        }
    }

    for (var i = 0; i < myElement.length; i++) {

        myElement[i].addEventListener("mouseover", function (e)
        {
            document.addEventListener("keypress", function(t){keyaction(t,e);}, false);
        });

        myElement[i].addEventListener("mouseout", function ()
        {
            document.removeEventListener("keypress", keyaction, false);
        });
    }
}

Hi I have multiple divs on the page. I want to raise an alert based on a user hovering over one of the divs and pressing control z. I need to in effect alert out what is in the span dependant upon which div the user is hovered over on.

I have tried with getbyId the problem arises with multiple elements. I am unsure if i need to bind every element.

    <div class="mydiv">Keypress here!<span>test</span></div>
    <div class="mydiv">Keypress here!<span>test1</span></div>

var pressed = false;

onload = function(e) {
    var myElement = document.getElementsByTagName('div');

    function keyaction(e, element) {

        //  var originator = e.target || e.srcElement;
        if (e.charCode === 122 && e.ctrlKey) {
            //myElement.innerHTML += String.fromCharCode(e.charCode);
            alert(true);
        }
    }

    for (var i = 0; i < myElement.length; i++) {

        myElement[i].addEventListener("mouseover", function (e)
        {
            document.addEventListener("keypress", function(t){keyaction(t,e);}, false);
        });

        myElement[i].addEventListener("mouseout", function ()
        {
            document.removeEventListener("keypress", keyaction, false);
        });
    }
}

• javascript
• jquery

• this fires the alert once on first hover and press then multiple times thereafter – matt Commented Oct 26, 2015 at 22:34
• 1 why have you tagged this as jQuery? – Mark Schultheiss Commented Oct 26, 2015 at 22:58

6 Answers 6

I think you are overdoing for what is needed. A simple keydown event bind on mouseover and unbind on mouseout would do the trick.

Here's an example :

 <div id="wrapper">
    <div class="mydiv">Keypress here!<span>test</span></div>
    <div class="mydiv">Keypress here!<span>test1</span></div>
</div>
<br>
    Keys Pressed : 
    <br>
    <div id="key"></div>

$("#wrapper .mydiv").on("mouseover",function()
{
    $(document).bind("keydown",function(e) {
        var originator = e.keyCode || e.which;
         if(e.ctrlKey)
         $("#key").append(originator + ",");
    });

}).on("mouseout",function()
{
    $(document).unbind("keydown");
});

http://jsfiddle/s095evxh/2/

P.S : for some reason , Jsfiddle doesn't allow keydown event on mouseover so you might have to click manually on the div to make it work but the solution works flawless on a local system.

I would suggest that you use the normalized e.which if available. You also have code 122 which is F11 keys code not 90 related to the 'z' key.

Turn the event manager on when over and off when not per your stated desire:

$('.mydiv').on('mouseenter', function () {
    $(window).on('keydown', function (e) {
        var code = e.which ||e.keyCode;
        $('#status').append('we:'+ code);
        if (code === 90 && e.ctrlKey) {
          $('#status').append('howdy');
       }
    });
});
$('.mydiv').on('mouseleave', function () {
    $(window).off('keydown');
});

Note that I changed to post some text to a fictitious "status" div rather than your alert as that will change where the cursor hovers. Change that to some real action. There MAY be issues with the event bubbling but I will leave that determination to you.

Here is a key code list (google for more/another) https://gist.github./lbj96347/2567917

EDIT: simple update to push the span text into the status div:

<div class="mydiv">Keypress here!<span>test</span>
</div>
<div class="mydiv">Keypress here!<span>test1</span>
</div>
<div id="status">empty
    <div>

$('.mydiv').on('mouseenter', function () {
    var me = this;
    $(window).on('keydown', function (e) {
        var code = e.which || e.keyCode;
        $('#status').append('we:' + code);
        if (code === 90 && e.ctrlKey) {
            $('#status').append($(me).find('span').text());
        }
    });
});
$('.mydiv').on('mouseleave', function () {
    $(window).off('keydown');
    $('#status').text('out');
});

Listen for the keypress on the window and add mouse events to the elements to toggle a variable with what element is active.

var activeElem = null;
$(".mydiv")
    .on("mouseenter", function () {
        activeElem = $(this); 
    }).on("mouseleave", function () { 
        if(activeElem && activeElem.is(this)) {
            activeElem = null; 
        }
    });

$(window).on("keydown", function (evt) {
    if( activeElem && evt.keyCode===90 && evt.ctrlKey) {
        console.log(activeElem.find("span").text());  
    }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">Keypress here!<span>test</span></div>
    <div class="mydiv">Keypress here!<span>test1</span></div>

To prevent frequent binding/unbinding of the "keydown" handler whenever the user hovers over the <div>, I would simply keep track of the <div> currently being hovered. Something like this:

var hovering = null;
$(document)
  .on('keydown', function(e) {
    if (e.which === 90 && e.ctrlKey && hovering) {
      console.log($('span', hovering).text());
    }
  })
  .on('mouseover', '.mydiv', function(e) {
    hovering = this;
  })
  .on('mouseout', '.mydiv', function() {
    hovering = null;
  });

.mydiv:hover {
  cursor: pointer;
  color: gray;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">Test <span>1</span></div>
<div class="mydiv">Test <span>2</span></div>
<div class="mydiv">Test <span>3</span></div>
<div class="mydiv">Test <span>4</span></div>
<div class="mydiv">Test <span>5</span></div>

I would propose the other way around. Listen for the keypress, and select the element which has the hover.

$(document).keypress(function(e) {
  if (e.charCode === 26 && e.ctrlKey) {
    console.log("Key pressed");
    console.log($('.mydiv:hover span').html());
  }
});

Codepen Demo

If I am understanding your question correctly, you are looking for the text value of the span within the hovered element. Traversing the DOM from $(this) will get you what you want.

$(".mydiv").mouseover(function (e) {
    alert($(this).find('span').text());
});