按下某个键时触发两个链接之一

问题描述

我想使用 E 键触发第一个链接，或者使用 R 键触发第二个链接。我想避免必须按 Enter 来触发导航。

这是我尝试过的：

$(document).ready(function() {
  $(document).bind("keydown",function(e) {
    console.log(e.keyCode);
    
    if (e.keyCode == 76) {
      $("div:first-of-type a").focus();
      $("div:nth-of-type(2n) a").focus();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test">
  <a href="http://google.com">Google (E)</a>
  <a href="http://youtube.com">YouTube (R)</a>
</div>

解决方法

使用以下简单脚本：

$(document).on("keydown",function (e) {
    if (e.which == 69) { // e
        $("#yourLink1").click();
    }
});

$(document).on("keydown",function (e) {
    if (e.which == 82) { // r
        $("#yourLink2").click();
    }
});

您可以在此处找到更多的键控代码：https://keycode.info/

我还建议您提供链接IDs：

<div class="test">
    <a id="yourLink1" href="http://google.com"></a>
    <a id="yourLink2" href="http://youtube.com"></a>
    <img src="https://www.hugochaume.com/wp-content/uploads/2015/08/logo-codepen.png">
</div>

更新：

由于实际上已弃用了.which和.keyCode方法，因此我建议使用.code：

document.addEventListener("keydown",function(e) {
    if (e.code == "KeyE") { // e
        $("#yourLink1").click();
    }
    if (e.code == "KeyR") { // r
        $("#yourLink2").click();
    }
});

（感谢Danziger提出的建议）

,

您不需要给任何锚定焦点并尝试以编程方式单击它，只需直接导航到所需链接的href。

此外，您在class="test之后缺少右引号。

“ e”和“ r”分别是69和82，而不是76。

$(document).ready(function() {
  $(document).on("keydown",function(e) {
    if (e.keyCode == 69) { 
      location.href = "https://youtube.com";
      alert("Going to YouTube"); // Just for testing
    } else if(e.keyCode == 82) {
      location.href = "https://example.com";
      alert("Going to Example");  // Just for testing
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <a href="https://youtube.com">
    <img src="https://www.hugochaume.com/wp-content/uploads/2015/08/logo-codepen.png">
  </a>
</div>

,

一种选择是将.input-select{ position: relative; height: 100%; } .input-select:hover{ content: ''; position: absolute; display: inline-block; height: 50px; width: 50px; background-color: red; z-index: 100; } 添加到两个链接中，以便您可以从JS中获取它们，然后用id的值更新window.location：

href

$(document).ready(function() {
  $(document).bind('keydown',(e) => {
    const link = document.getElementById(`link${ e.key.toUpperCase() }`);
    
    if (link) {
      console.log(`Should redirect to ${ link.href }...`);
      location.href = link.href;
    } else {
      console.log(`No link for key = ${ e.key }.`);
    }
  });
});

body {
  font-family: monospace;
}

a {
  display: block;
  padding: 8px;
  text-decoration: none;
}

kbd {
  border: 1px solid #CCC;
  background: #EEE;
  border-radius: 2px;
  padding: 0 4px;
}

.as-console-wrapper {
  max-height: 66px !important;
}

或者，如果您不想添加<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="test"> <a href="http://google.com" id="linkE">Google <kbd>E</kbd></a> <a href="http://youtube.com" id="linkR">YouTube <kbd>R</kbd></a> </div>，则可以使用jQuery的.children()和.eq()来根据其位置获取正确的链接：

id

$test = $('.test');

$(document).ready(function() {
  $(document).bind('keydown',(e) => {
    const key = e.key.toUpperCase();
    
    if (key !== 'E' && key !== 'R') {
      console.log(`No link for key = ${ e.key }.`,e.code);
      return;
    }
    
    const link = $test.children().eq(key === 'E' ? 0 : 1);
        
    if (link) {
      console.log(`Should redirect to ${ link.attr('href') }...`);
      // location.href = link.href;
    }
  });
});

body {
  font-family: monospace;
}

a {
  display: block;
  padding: 8px;
  text-decoration: none;
}

kbd {
  border: 1px solid #CCC;
  background: #EEE;
  border-radius: 2px;
  padding: 0 4px;
}

.as-console-wrapper {
  max-height: 66px !important;
}