【问题标题】:push e.which to array is not equal to given arraypush e.which 到数组不等于给定数组
【发布时间】:2012-12-02 19:07:28
【问题描述】:

有什么想法吗?想不通...它说arr不等于[17, 67]

var key = function(keys, fn) {
    var arr = [];
    $(document).on({
        keydown: function(e) {
            arr.push(e.which);
            if (arr === keys) {
                fn();
            }
        },
        keyup: function() {
            arr = [];
        }
    });
};

// ctrl + c
key([17, 67], function() {
    alert(true);
});

这是fiddle

更新

由于Cymen 的回答它有效,但是如果您按 ctrl + a 然后按 ctrl + alt + a 或反之亦然,您必须触发第二个快捷方式两次才能工作,有什么想法吗?

fiddle

var key = function(keys, fn) {
    var arr = [];
    $(document).on({
        keydown: function(e) {
            arr.push(e.which);
            for (var i = 0; keys[i]; i++) {
                if (arr[i] !== keys[i]) {
                    return false;
                }
            }
            fn(e);
            arr = [];
        },
        keyup: function() {
            arr = [];
        }
    });
};

// ctrl + c
key([17, 67], function() {
    alert(true);
});

// ctrl + alt + c
key([17, 18, 67], function() {
    alert('ctrl+alt+c');
});

【问题讨论】:

  • 这是打破Konami code的新尝试吗?
  • 不,不是真的……我只需要一个简单的快捷键/键事件处理程序……

标签: jquery keydown keyevent keyup


【解决方案1】:

您不能使用=== 检查数组是否在内容上相等。用 JavaScript 控制台检查一下:

[17, 35] === [17, 35]
false

a = [17, 35]
[17, 35]
a === a
true

所以数组上的=== 正在检查引用而不是值。您可以使用下划线之类的其他内容进行比较,或者如果这是某种挑战,您可以自己编写一个。或者由于您只比较两个元素,请执行以下操作:

var key = function(keys, fn) {
    var arr = [];
    $(document).on({
        keydown: function(e) {
            arr.push(e.which);
            if (arr[0] === keys[0] && arr[1] === keys[1]) {
                fn();
                arr = [];  // added this to avoid buggyness
            }
            console.log(arr);
            console.log(keys);
        },
        keyup: function() {
            arr = [];
        }
    });
};

// ctrl + c
key([17, 67], function() {
    alert(true);
});​

http://jsfiddle.net/9LbsD/

对于两个以上的键,例如 CTRL+ALT+C

You need an array comparison that works for variable lengths like this one:

var equalArrays = function(array1, array2) {
    if (array1.length != array2.length) {
        return false;
    }
    for (var i=0; i < array1.length; i++) {
        if (array1[i] !== array2[i]) {
            return false;
        }
    }
    return true;    
}

var key = function(keys, fn) {
    var arr = [];
    $(document).on({
        keydown: function(e) {
            arr.push(e.which);
            console.log('arr', arr, 'keys', keys, 'match', equalArrays(arr, keys));
            if (equalArrays(arr, keys)) {
                fn();
                arr = [];                
            }
            console.log(arr);
            console.log(keys);
        },
        keyup: function() {
            arr = [];
        }
    });
};

// ctrl + c
key([17, 67], function() {
    alert(true);
});

// ctrl + alt + c
key([17, 18, 67], function() {
    alert('ctrl+alt+c');
});

http://jsfiddle.net/WZLut/

错误较少的方法

我们需要跟踪按下了哪些键,但是一个键只能在一个组合中按下一次(我假设),并且在 keyup 上,我们应该只删除向上的键而不是所有键。所以这是一个可行的方法:

var equalArrays = function(array1, array2) {
    return _.isEqual(array1, array2);
}

var key = function(keys, fn) {
    var arr = [];
    $(document).on({
        keydown: function(e) {
            arr = _.without(arr, e.which);
            arr.push(e.which);
            if (equalArrays(arr, keys)) {
                fn();             
            }
        },
        keyup: function(e) {
            arr = _.without(arr, e.which);
            arr = _.uniq(arr);
        }
    });
};

// ctrl + c
key([17, 67], function() {
    alert('ctrl+c');
});

// ctrl + alt + c
key([17, 18, 67], function() {
    alert('ctrl+alt+c');
});

http://jsfiddle.net/BgQUA/

【讨论】:

  • 没问题。在 chrome 下添加了一个我需要的小错误修复(请参阅旁边的评论 - 添加此内容以避免错误)。
  • 是的,看过这个,很有帮助。
  • 嗯,你的方法还不错,但这部分 if (arr[0] === keys[0] &amp;&amp; arr[1] === keys[1]) 杀死了像 ctrl + alt + c 这样的快捷方式。有什么想法吗?
  • 您需要一个可用于可变数组长度的数组比较:jsfiddle.net/WZLut
  • ...甚至在香草脚本中:fiddle.jshell.net/WZLut/3 :-) 感谢您的帮助! :-*
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-05
  • 2021-10-24
  • 1970-01-01
  • 1970-01-01
  • 2019-02-22
相关资源
最近更新 更多