jQuery 1.7.2 中的 Konami 代码键绑定

Posted

技术标签:

【中文标题】jQuery 1.7.2 中的 Konami 代码键绑定【英文标题】:Konami Code Keybinding in jQuery 1.7.2 【发布时间】:2012-07-21 14:33:57 【问题描述】:

我想实现raptorize-Plugin,但它不适用于 jQuery 1.7.2,因为我认为这部分:

else if(options.enterOn == 'konami-code')
            var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";
            $(window).bind("keydown.raptorz", function(e)
                kkeys.push( e.keyCode );
                if ( kkeys.toString().indexOf( konami ) >= 0 ) 
                    init();
                    $(window).unbind('keydown.raptorz');
                
            , true);

当我使用button-version 时,它可以工作。可能是什么问题?

【问题讨论】:

什么不起作用?您是否在屏幕上或浏览器控制台中收到错误消息? 我的浏览器控制台显示 TypeError: ((f.event.special[s.origType] || ).handle || s.handler).apply is not a function 【参考方案1】:

http://www.zurb.com/playground/javascripts/plugins/jquery.raptorize.1.0.js 的第 93 行上的 .bind() 使用第三个参数来防止冒泡,不知道为什么当我们在窗口上查找 keydown 事件时需要这样做,但这是在较新的 jQuery 中破坏它的原因版本。删除第三个参数,它将在 1.7.2 中工作。

还要确保您正确设置了选项,例如:

$('.myButton').raptorize(
   'enterOn' : 'konami-code'
);

【讨论】:

谢谢 Tjkoopa,但您的第三个参数是什么意思? var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65"; $(window).bind("keydown.raptorz", function(e) kkeys.push( e.keyCode ); if ( kkeys.toString().indexOf( konami ) >= 0 ) init(); $(window).unbind('keydown.raptorz'); 在 bind() 调用中,第一个参数是 'keydown.raptorz',第二个是回调,第三个是设置 preventBubbling 的布尔值 - 删除第三个参数,它位于第 99 行。 【参考方案2】:

您可能需要考虑使用 Mousetrap 库而不是 jQuery。

上面链接的页面上甚至还有一个 Konami 代码示例,只需一行 JS 代码即可完成。

【讨论】:

【参考方案3】:

自原始 raptorize 插件发布(2010 年)以来已经有很长时间了,不幸的是,较新的 jQuery 版本打破了它。有一个更新的实现 (https://github.com/randomvlad/raptorize-jquery) 支持 jQuery 版本 1.7+、2.x 和 3.x 以及一些额外的改进。

konami-code的具体逻辑已经调整:

 else if (options.enterOn === 'konami-code') 
    var keysPressed = [];
    var konamiCode = "38,38,40,40,37,39,37,39,66,65";
    $(window).on("keydown.raptorz", function (e) 
        keysPressed.push(e.keyCode);

        if (keysPressed.length > 10) 
            keysPressed = keysPressed.slice(1);
        

        if (keysPressed.toString() === konamiCode) 
            animateRaptor();
        
    );

变化:

将已弃用的 jQuery bind() 替换为 on()。 允许多次使用 konami-code。 优化以仅跟踪和比较最后 10 次击键。

免责声明:我是更新后的 raptorize 2.0 插件的“作者”,该插件本身基于 ZURB (https://zurb.com/playground/jquery-raptorize) 的原始插件。

【讨论】:

以上是关于jQuery 1.7.2 中的 Konami 代码键绑定的主要内容,如果未能解决你的问题,请参考以下文章

flex中的konami代码

markdown Konami代码

html Unicorn Shitting Rainbows - Konami代码开始有趣

在现场尝试了多种解决方案,但均未奏效:在 Konami 代码上播放 <audio>

jquery-1.7.2.min.js和jquery-1.7.2.js这两个版本啥区别

带有 Javascript 的 Wordpress 插件