Question

我正在使用Chrome来测试应用程序中的MVC视图之一，该页面上有两个箭头链接，我想通过在用户按下向左/向右箭头键时传递参数来执行某些功能。

这是我的标记和脚本。

@if (ViewBag.PreviousId != null)
        {
            <a class="left carousel-control" href="#myCarousel" data-slide="prev" id="btnPrevious" 
               onclick="GetImage('@ViewBag.PreviousId','lArrow')" onkeypress="KeyboardClick(event,'@ViewBag.PreviousId')">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
        }
        @if (ViewBag.NextId != null)
        {
            <a class="right carousel-control" href="#myCarousel" data-slide="next" id="btnNext" 
               onclick="GetImage('@ViewBag.NextId','rArrow')" onkeypress="return KeyboardClick(event,'@ViewBag.PreviousId')">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
        }

function KeyboardClick(e, id) {
//Check if it is left/right arrow key
if (e.which == 37) {
    GetImage(id, 'lArrow');
} else if (e.which == 39) {
    GetImage(id, 'rArrow');
}

}

当我按键盘上的箭头键时，以上代码不起作用。我希望onKeyPress的工作方式类似于onClick（）。

我发现了很多示例/答案，它们解释了如何将事件关联到任何DOM元素或将其触发，但是它们都没有解释如何传递参数。请告知如何解决。预先感谢。

Answer 1

这里的主要问题是按键事件不会发送到特定元素（除非它像当前处于焦点的<input>），而只会发送到window和document。这就是需要附加事件处理程序的地方。

接下来，脚本必须易于获得有关上一个和下一个ID的服务器端信息，一种简单的方法是将其放在相关元素的data属性中。我在这里使用两个滑块箭头。

最后一个建议是：避免重复的代码，单击箭头和按箭头键都应使同一处理程序函数运行。一种方法是简单地在按下键的情况下在相应的箭头元素上调用click()：

function GetImage(id, arrow) {
  console.log(id, arrow)
}

$(function() {

  const $leftArrow = $('#btnPrevious');
  const $rightArrow = $('#btnNext');

  $leftArrow.click(function (e) {
    e.preventDefault();
    GetImage($(this).data('id'), 'lArrow');
  });

  $rightArrow.click(function (e) {
    e.preventDefault();
    GetImage($(this).data('id'), 'rArrow');
  });

  $(document).on("keyup", function(e) {
    const ev = e.originalEvent;
    if (ev.keyCode === 37) $leftArrow.click();
    if (ev.keyCode === 39) $rightArrow.click();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<a class="left carousel-control" href="" data-slide="prev" id="btnPrevious" data-id="@ViewBag.PreviousId">
  <span class="glyphicon glyphicon-chevron-left"></span>
  <span class="sr-only">Previous</span>
</a>

<a class="right carousel-control" href="" data-slide="next" id="btnNext" data-id="@ViewBag.NextId">
  <span class="glyphicon glyphicon-chevron-right"></span>
  <span class="sr-only">Next</span>
</a>

（运行代码段时，请先在输出区域中单击以捕获按键）

使用JQuery触发onKeyPress事件传递参数不起作用

1 个答案: