how to target event for “shift keydown & click” on a div?

Question

I want to control events when hovering a <div> element.

I have my code pretty much working, but I have 2 remaining problems!

1. When I first run the code in my JSFiddle , I need to click on the body of the document first to get the keydown to be recognised. If I run the code and hover right away and press shift nothing happens. I have it running on doc ready,so not sure why I need to click first? Anyway to get this to work right way without needing to click?
2. I trace out in the console the console.log('click and press'); This is getting fired each time I press shift and is not looking for a click - why is this getting fired when pressing shift when I call it within a function that says $(document).on('keydown click', function (e) {

DEMO

My JS code is as follows

$(document).ready(function () {

$(".target").hover(function () {

    $(document).on('keydown click', function (e) {
        if (e.shiftKey) {
            // code to go here for click
            console.log('click and press');
        }
    });

    $(document).on('keydown', function (e) {
        if (e.shiftKey) {
            // change cursor to ne-resize
            $('.target').css('cursor', 'ne-resize', 'important');
        }
    });

    $(document).on('keyup', function (e) {
        // change cursor to sw-resize
        $('.target').css('cursor', 'sw-resize', 'important');
    });


});

});

Thanks

Answer 1

Your event binding is incorrect. you can use:

Demo: http://jsfiddle.net/g9ea8/8/

Code:

$(document).ready(function () {

    var hovering = false;

    $(".target").hover(function () {
        hovering = true;
    }, function() {
        hovering = false;
    });

    $(document).on('click', function (e) {
        if (hovering && e.shiftKey) {
            // code to go here for click
            console.log('hovering+shift+click');
        }
    });

    $(document).on('keydown', function (e) {
        if (hovering && e.shiftKey) {
            // change cursor to ne-resize
            $('.target').css('cursor', 'ne-resize', 'important');
            console.log('hovering+shift');
        }
    });

    $(document).on('keyup', function (e) {
        // change cursor to sw-resize
        if(hovering) {
            $('.target').css('cursor', 'sw-resize', 'important');
            console.log('hovering+keyup');
        }
    });

});

Answer 2

1. The reason why you need to click first on the fiddle demo is because the frame doesn't have focus, normally this should work fine.

2. You shouldn't be attaching a keydown listener, you only need a to attach click , otherwise keydown will fire the event regardless of a click occurring.

Also, currently you're attaching 3 handlers every time you hover over .target , see @techfoobar's answer for a cleaner solution.