我正在创建一个小费计算器。我在页面上有一个按钮,如果你按下它或者你按下键盘上的enter键,它就会计算出小费。当我按enter键时,计算提示的函数会运行,但随后它会再次运行,尽管我在代码中没有再次调用它。奇怪的是,第二次运行时,它进入存储函数的变量,运行函数。我不知道为什么它会进入一个没有被调用的变量。
我试着调试,看看是否遗漏了一个步骤,是否在某个地方调用了函数两次,但没有。
下面是按键事件:
document.addEventListener('keypress', function(event) {
if (event.keycode === 13 || event.which === 13) {
calculateTip();
}
然后紧跟在代码后面的是calculateTip变量:
var calculateTip = function() {
some code that does calculations
}
按键按下后,执行calculateTip,然后直接进入上面的变量再次运行calculateTip。
我的生活里有我的密码。我已经测试过了,看看这个生命之外的代码是否影响了什么,但它没有。“Click”事件侦听器工作完美,只执行一次calculateTip函数。在我的这个版本的代码中,如果单击enter,计算提示会将'test'打印到控制台两次。
生活:
var controller = (function(calcCtrl, UICtrl) {
var setupEventListeners = function() {
var DOM = UICtrl.getDOMstrings();
document.querySelector(DOM.button).addEventListener('click', calculateTip);
document.addEventListener('keypress', function(event) {
if (event.keycode === 13 || event.which === 13) {
calculateTip();
}
});
};
var calculateTip = function() {
console.log('test')
};
return {
init: function() {
setupEventListeners();
}
}
})(calculateController, UIController);
controller.init();
通过jquery,您可以解决这个问题
$(document).unbind('keypress').bind('keypress', function (e) {
if (e.keycode === 13 || e.which === 13) {
calculateTip();
}
});
这是一次,请你看看这个。
<script type="text/javascript">
document.addEventListener('keypress', function(event) {
if (event.keycode === 13 || event.which === 13) {
calculateTip();
}
});
var calculateTip = function() {
console.log("enter clicked");
}
</script>