Question

最近有一种趋势是在更多图形应用程序中执行某些拖动操作时使用空格键作为元键。

问题是鼠标在按住空格键（或任何非修饰键）并移动鼠标时闪烁：http://jsfiddle.net/S3AJr/4/

示例代码：

$(function() {
    var count = 1,
        isSpaceBarPressed = false;

    $('body').on('keydown', function(e) {
        e.preventDefault();
        if (e.which === 32) {
            isSpaceBarPressed = true;
        }
    });

    $('body').on('keyup', function(e) {
        e.preventDefault();
        if (e.which === 32) {
            isSpaceBarPressed = false;
        }
    });

    $('body').on('mousemove', function(e) {
        if (isSpaceBarPressed) {
            e.preventDefault();
            $('.pizza').text(count++);
        }
    });
});

有没有办法解决这个问题，还是仅限于ctrl，alt，shift和meta？

Answer 1

轻松修复兄弟！

// note include underscore-min.js for our throttle function

$(function () {
    var count = 1,
        isSpaceBarPressed = false;

    var throttledRender = _.throttle(function () {
        $('.pizza').text(count);
    }, 200);

    $('body').on('keydown', function (e) {
        e.preventDefault();
        if (e.which === 32) {
            isSpaceBarPressed = true;
        }
    });

    $('body').on('keyup', function (e) {
        e.preventDefault();
        if (e.which === 32) {
            isSpaceBarPressed = false;
        }
    });

    $('body').on('mousemove', function (e) {
        if (isSpaceBarPressed) {
            e.preventDefault();
            count++;
            throttledRender();
        }
    });
});

问题是您经常渲染WAY（每次事件触发时）。相反，您希望每次都增加变量，但只是定期渲染。使用forked fiddle功能查看此underscore's throttle。如果您愿意，也可以使用jQuery plugin。

尝试使用非修改键并拖动时，鼠标会闪烁

1 个答案: