收听keyPressed事件，剃刀

<body> 
<table align="center" width="100%" height="100%"> 
    <tr> 
     <td align="center" id="previousPhoto"> 
      @if (Model.HasPreviousPhoto) 
      { 
       if (Model.CurrentPhotoIndex == 0) 
       { 
         <a href="@HrefHelper.ToPhoto(Model.Title, Model.CurrentPageIndex - 1, maxPhotosOnThePage)"> 
          <section class="navSection"> 
           <img class="previousPhoto" src="@Url.Content("~/Content/Icons/arrows.png")" /> 
          </section> 
         </a> 

        } 
        else 
        { 
         <a href="@HrefHelper.ToPhoto(Model.Title, Model.CurrentPageIndex, Model.CurrentPhotoIndex - 1)"> 
          <section class="navSection"> 
           <img class="previousPhoto" src="@Url.Content("~/Content/Icons/arrows.png")" /> 
          </section> 
         </a> 
        } 
      } 
      else 
      { 
       <section class="navSection"></section> 
      } 
     </td> 
     <td class="photoPlaceholder" align="center"> 
      <section class="photoSection"> 
       <img src="@Model.CurrentPhoto.GenerateSrcHTML()" /> 
      </section> 
     </td> 
     <td align="center" id="nextPhoto"> 
      @if (Model.HasNextPhoto) 
      { 
       if (Model.CurrentPhotoIndex == maxPhotosOnThePage) 
       { 
         <a href="@HrefHelper.ToPhoto(Model.Title, Model.CurrentPageIndex + 1, 0)"> 
          <section class="navSection"> 
           <img src="@Url.Content("~/Content/Icons/arrows.png")" /> 
          </section> 
         </a> 
       } 
       else 
       { 
         <a href="@HrefHelper.ToPhoto(Model.Title, Model.CurrentPageIndex, Model.CurrentPhotoIndex + 1)"> 
          <section class="navSection"> 
           <img src="@Url.Content("~/Content/Icons/arrows.png")" /> 
          </section> 
         </a> 
       } 
      } 
      else 
      { 
       <section class="navSection"></section> 
      } 
     </td> 
    </tr> 
</table>

现在我需要听左/右箭头keydown事件并发出与链接相同的动作。据我所知，没有JS的帮助，这是不可能的，对吧？我对ASP.NET很新颖，尤其是JS，所以有人能告诉我实现上面描述的最佳方式吗？收听keyPressed事件，剃刀

来源

2016-04-20 52hertz

您将需要添加的js的片段在视图

<script> 
    document.addEventListener('keydown', function(e){ 
     //37 is left arrow, 39 is right arrow 
     if(e.which === 37){ 
      document.getElementById('previousPhoto').getElementsByTagName('a')[0].click(); 
     } else if (e.which === 39) { 
      document.getElementById('nextPhoto').getElementsByTagName('a')[0].click(); 

    } 
}); 

</script>

来源

2016-04-20 19:27:35

好，它触发按键输入。但出现了一些问题：get-request被添加到了TypeError：document.getElementById（...）。getElementsByTagName（...）。click不是一个函数。 – 52hertz

getElementsByTagName获取一个nodeList，一个类似数组的列表，包含所有匹配的元素。如果您想要该集合中的第一个元素，您可以使用[0]来访问它。 'document.getElementById（'previousPhoto'）。getElementsByTagName（'a'）[0] .click（）;' – 52hertz

是的，我忽略了这一点。更新了我的答案。 –

收听keyPressed事件，剃刀

回答

相关问题