Question

我正在一个项目上运行javascript函数，该项目在以下情况下运行：1）单击一个按钮或2）按下“返回”键。 javascript函数将div的可见性设置为“ visible”，并更改“ onclick”和“ onKeyDown”属性以在第二次单击/按下时运行其他函数。

例如，单击一次按钮（或按回车键）将使div出现，而单击两次则应使其消失。

问题是我无法弄清楚触发函数时如何使javascript更改“ onKeyDown”属性。这可能吗？

我的代码基于以下答案：Call a function when the enter button is pressed via Javascript

到目前为止，这是我的代码：

function visible() {
document.getElementById("box").style.visibility = "visible";
document.getElementById("button").onclick = hidden;
document.body.onKeyDown = "if(event.keyCode==13) hidden()";
}

function hidden() {
   document.getElementById("box").style.visibility = "hidden";
    document.getElementById("button").onclick = visible;
    document.body.onKeyDown = "if(event.keyCode==13) visible()";
}

#box {
  visibility:hidden;
  width:200px;
  height:200px;
  background:red;
}


#button {
  width:120px;
  height:50px;
  background:lightblue;
}

<html>

<body onKeyDown="if(event.keyCode==13) visible()">

<div id="box"></div>
<div id="button" onclick="visible()" ></div>

</body>

</html>

单击蓝色框将显示红色框，然后按回车键；但是再次按回车键不会使该框消失。

Answer 1

JavaScript的onkeydown属性区分大小写。因此，使用onKeyDown会将 different 函数设置为hidden，而主体的击键动作仍为visible()。

要修复此问题，请将两个文件中的onKeyDown更改为onkeydown。起初有点让人困惑，因为它没有遵循通常的大写语法，但是所有HTML属性都是小写。

还要将onkeydown设置为函数而不是字符串：

document.body.onkeydown = function(){if (e.keyCode==13) visible()};

最后，e未定义。将其替换为event，它应该可以工作。

Answer 2

function visible() {
  document.getElementById("box").style.visibility = "visible";
  document.getElementById("button").onclick = hidden;
  document.body.onkeydown = function() {
    if (event.keyCode == 13) hidden()
  };
}

function hidden() {
  document.getElementById("box").style.visibility = "hidden";
  document.getElementById("button").onclick = visible;
  document.body.onkeydown = function() {
    if (event.keyCode == 13) visible()
  };
}

#box {
  visibility: hidden;
  width: 200px;
  height: 200px;
  background: red;
}

#button {
  width: 120px;
  height: 50px;
  background: lightblue;
}

<html>

<body onKeyDown="if(event.keyCode==13) visible()">

  <div id="box"></div>
  <div id="button" onclick="visible()"></div>

</body>

</html>

如何使用JavaScript函数修改onKeyDown事件

2 个答案: