javascript - Html 上的键绑定(bind)

标签 javascript jquery html

如何将W键绑定(bind)到网页上的按钮

我尝试使用 .keypress 但它似乎不起作用。

这里是代码:

<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head> 
<body> 
    <div class="d-pad">
      <div id="d-up" class="button d up"></div>
      <div id="d-right" class="button d right"></div>
      <div id="d-down" class="button d down"></div>
      <div id="d-left" class="button d left"></div>
    </div>

<script>
 $(document).keypress(function(e){                     // keybiding 
    if (e.which == 87){
        $("#d-up").click(function(){alert('UP')});
    }
 });
</script>     
</body>
</html>

我尝试将 W 键与 id = d-up 的向上按钮绑定(bind),每当按下 W 时,都会出现一条警告,提示“向上”。这似乎不起作用。我在这里做错了什么吗?

谢谢

最佳答案

你没有说:

whenever W is pressed, show an alert

你说:

whenever W is pressed, set things up so that if a div with no content in it is clicked with the mouse, show an alert

摆脱点击处理程序。

 $(document).keypress(function(e){ 
    if (e.key == 87){
        document.body.style.backgroundColor = "black";
    }
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

此演示中的注意事项:

  • 您需要聚焦结果才能看到效果
  • 我已改用背景颜色,因为 alert 已沙箱化在 stackoverflow 代码片段中
  • w 与 W 不同

关于javascript - Html 上的键绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33403597/

相关文章:

javascript - 为 li 和 ul li 设置不同的 <span> 标签(嵌套)

javascript - Marionette.js - ItemView 获取父区域引用

javascript - 如何使用自定义事件(特别是自定义 dataTransfer 属性)触发事件?

jquery - 小屏幕上不显示下拉菜单

javascript - 无法使用jquery获取悬停的svg元素的id

javascript - promise : fetched data weirdnesses

jquery - 如何结合 ko.js 和 jQuery 淡入动态绑定(bind)的 DOM 对象?

javascript - 尝试制作一排随机宽度与 Canvas 宽度成比例的砖 block

html - 根据屏幕大小调整图像大小并使其与所有浏览器兼容,无需滚动或 javascript

Javascript 外部文件未正确链接