Question

如何修改此代码，以便按下并按住键只触发一次functForward功能？

问题在于，按住键时，功能将被反复触发，并发生一种交错。在我发布密钥后很长一段时间，这将导致functForward的继续。

欢迎任何欢迎。

    var addEvent = document.addEventListener ? function(target, type, action) {
      if (target) {
        target.addEventListener(type, action, false);
      }
    } : function(target, type, action) {
      if (target) {
        target.attachEvent('on' + type, action, false);
      }
    }

    addEvent(document, 'keydown', function(e) {
      e = e || window.event;
      var key = e.which || e.keyCode;
      if (key === 87) {
        functForward();
      }
    });
    addEvent(document, 'keyup', function(e) {
      e = e || window.event;
      var key = e.which || e.keyCode;
      if (key === 87) {
        functStopDrive();
      }
    });

Answer 1

＆＃34;如何编辑此代码，以便按下并按住键只触发一次functForward功能？＆＃34;

所有现代浏览器都支持addEventListener()，因此除非您打算制作自己的自定义事件，否则不需要attachEvent()。简而言之：不要只编辑你拥有的代码，使用更简化和更容易理解的东西。

函数funcForward和funcStopDrive未在提供的代码中定义，无法编辑未知函数周围的代码，更不用说尝试编辑代码以使未知函数正常工作。

再次按下一个键，这样神秘功能X在按下按键时会执行某些操作。如何将其量化为距离，时间或状态参数，而不知道X函数的作用及其完成方式？

在以下演示中：

有3个事件和3个事件处理程序。它们每个都有一个具有动画样式的类。
确保测试区域已聚焦（单击区域中的任意位置即可）。
只需点按空格键。
尝试点击空格键一次当喷气机再次点击空格键时，它看起来很酷。

演示

＆＃13;

var jet = document.querySelector('.fa-fighter-jet');

document.addEventListener('keydown', climb)
document.addEventListener('keypress', cruise);
document.addEventListener('keyup', dive);

jet.focus();

function climb(e) {
  var key = e.which || e.keyCode;
  if (key === 32) {
    jet.classList.toggle('up');
  }
}

function cruise(e) {
  var key = e.which || e.keyCode;
  if (key === 32) {
    jet.classList.toggle('go');
  }
}

function dive(e) {
  var key = e.which || e.keyCode;
  if (key === 32) {
    jet.classList.toggle('down');
  }
}

＆＃13;

.fa {
  display: block;
  
}

.up {
  transform: translate(500px, -200px);
  transition: .75s ease-in;
}

.go {
  transform: translateX(500px);
  transition: .75s ease-out;
}

.down {
  transform: translate(500px, 200px);
  transition: .75s ease-in;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />


<i class='fa fa-fighter-jet fa-2x'></i>

＆＃13;

Keydown反复触发。可以避免吗？

1 个答案:

演示