CODEWITHSUNDEEP
javascriptjquerykeyboard-events
Redwall
Redwall

Reputation: 1020

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

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

Upvotes: 1

Views: 1116

Answers (2)

billyonecan
billyonecan

Reputation: 20270

  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.

Upvotes: 2

techfoobar
techfoobar

Reputation: 66693

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');
        }
    });

});

Upvotes: 3

Related Questions