【问题标题】:Check if key is already pressed when loading new page (JavaScript)检查加载新页面时是否已按下键(JavaScript)
【发布时间】:2015-04-25 21:44:04
【问题描述】:

我目前正在构建一个通过 JavaScript 使用自定义快速导航的网站。

如果用户按右键,他将被导航到我的页面列表中的下一页,并且通过按 ALT + 向右键或向左键,他可以在浏览器历史记录中向前和向后导航。

这是我当前的代码:

var map = [];

    window.onkeydown = window.onkeyup = function(e){
        e = e || event; // to deal with IE
        map[e.keyCode] = e.type == 'keydown';

        if (map[18] && map[39]) { // ALT + Right
            window.history.forward();
        }
        else if (map[18] && map[37]) { // ALT + Left
            window.history.back();
        }
        else if (map[39]) { // Right Key
            window.location.href = "{{ path('sctn_findsong') }}";
        }
        if (map[38]){ // Up Key
            //
        }
        if (map[40]){ // Down Key
            //
        }
    }

一切正常,除了一个小问题: 假设我想返回三页 - 如果我是一个逻辑思考的人,我会先按 ALT + 左键返回一个站点,然后当我在上一个站点时,按住 ALT 并按左键再次返回一个站点。但是,当我返回一个站点并按住 ALT 时,它不会记录 ALT 仍被按下,所以每次我到达前一个站点时都必须再次按 ALT,这很烦人。 我如何让它按照我想要的方式工作? 帮助表示赞赏。

【问题讨论】:

    标签: javascript jquery keypress keylistener keydown


    【解决方案1】:

    这是不可能的。您需要一个事件“keyup”或“keydown”才能在新页面加载后知道 ALT 键的状态。但是,您可以将状态(布尔向下或向上)存储在 localStorage 中。加载新页面时,您可以读取该值。但是,这可能不可靠,特别是如果您在页面加载期间(在加载页面之前)释放键。您还需要在每个加载的页面中包含处理 keyevents/localStorage 的 javascript。

    您是否考虑过更改 Web 应用程序的设计,以便通过异步 (ajax) 请求加载页面内容?这样,您实际上就不会离开主页,并且可以跟踪触发的事件。缺点是您需要创建自己的“历史”,因为您实际上并没有从浏览器的角度离开页面。一个很好的方法是使用window.location.hash

    【讨论】:

    • 谢谢。我有一个 B 计划来解决我的问题,这基本上就是你在第二段中提到的内容,但我只是希望我忽略了一些明显的事情,并且它会是一个单行。
    【解决方案2】:

    如果您不想使用 AJAX

    ,可以将页面加载到 IFRAME

    【讨论】:

      【解决方案3】:

      您应该查找 e.altKey==true 以查看 alt 键是否关闭

      var map = [];
      
      window.onkeydown = window.onkeyup = function(e){
          e = e || event; // to deal with IE
          map[e.keyCode] = e.type == 'keydown';
      
          if(e.altKey==true){ // ALT down
          if (map[39]) { //  + Right
              window.history.forward();
              //console.log("forward");
          }
          else if (map[37]) { //  + Left
              window.history.back();
              //console.log("back");
          }
          }
      
      
          else if (map[39]) { // Right Key
              window.location.href = "{{ path('sctn_findsong') }}";
          }
          if (map[38]){ // Up Key
              //
          }
          if (map[40]){ // Down Key
              //
          }
      }
      

      【讨论】:

      • 我在第一个 if 语句之前添加了这个: if (e.AltKey == true) { map[18] = true; } - 你是这么想的吗?
      • e.AltKey 与 map[18] 不同,请参阅更新 sn-p
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-01-08
      • 1970-01-01
      • 2011-06-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多