Question

我希望在悬停<div>元素时控制事件。

我的代码非常有用，但我还有2个问题！

当我第一次在我的JSFiddle中运行代码时，我需要先点击文档的正文才能识别keydown。如果我运行代码并立即悬停并按下shift，则没有任何反应。我已准备好在doc上运行，所以不确定为什么我需要先点击？无论如何要让它正常工作而不需要点击？
我在控制台中追踪console.log('click and press');每当我按下shift并且没有找click时，这就会被解雇 - 为什么在我按下班次时会被解雇在名为$(document).on('keydown click', function (e) {

我的JS代码如下

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


});

});

由于

Answer 1

您的事件绑定不正确。你可以使用：

演示： http://jsfiddle.net/g9ea8/8/

<强>代码：

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

你需要先点击小提琴演示的原因是因为框架没有焦点，通常这应该可以正常工作。
您不应该附加keydown听众，只需附加click，否则keydown无论click如何都会触发此事件发生。

另外，目前每次将鼠标悬停在.target上时都会附加3个处理程序，请参阅@ techfoobar的答案以获得更清晰的解决方案。

如何定位div上的“shift keydown＆amp; click”事件？

2 个答案: