Question

我想在完成点击后触发keydown事件，但问题是它在多次点击完成后触发。例如，单击5次并按下左箭头键将发出5次警报，因为某种方式我不明白，点击会在某种队列中堆叠。

我想要的是每次按键时只触发一次警报。因此，无论点击次数多少，每次按键都只会收到1次提醒。

有人可以向我解释背后发生了什么，我该如何解决这个问题？

JS

$(document).ready(function () {
    $('#a').click(function () {

        $(document).keydown(function (key) {
            switch (parseInt(key.which, 10)) {
                // Left arrow key pressed
                case 37:
                    alert('test');
                    break;
            }
        });
    });
});

HTML + CSS

<div id="a"> </div>
#a {
    background-color:blue;
    width:100px;
    height:100px;
}

Answer 1

$(document).ready(function () {
    $('#a').one("click", function () {

        $(document).keydown(function (key) {
            switch (parseInt(key.which, 10)) {
                // Left arrow key pressed
                case 37:
                    alert('test');
                    break;
            }
        });
    });
});

Answer 2

每次发生单击事件时，您都在运行绑定keydown函数的代码。单击5次将其绑定5次。

为了避免它，你可以使用某种第一次设置的标志，如果设置了标志则忽略它

$(document).ready(function () {
    var flag = false;
    $('#a').click(function () {

        if (flag) {
            return false;
        }

        flag = true;

        $(document).keydown(function (key) {
            switch (parseInt(key.which, 10)) {
                // Left arrow key pressed
                case 37:
                    alert('test');
                    break;
            }
        });
    });
});

Answer 3

每次点击标签时，它都会绑定keydown事件，因此您必须取消绑定按键事件

 $(document).ready(function () {
    $('#a').click(function () {
        $(document).off("keydown");
        $(document).on("keydown", function (key) {
            switch (parseInt(key.which, 10)) {
                // Left arrow key pressed
                case 37:
                    alert('test');
                    break;
            }
        });
    });
});

<强> DEMO

或使用

 var isclickA = false;
 $('#a').click(function () {
    isclickA = true;
 });

$(document).on("keydown", function (key) {
      if (isclickA) {
        switch (parseInt(key.which, 10)) {
            // Left arrow key pressed
            case 37:
                alert('test');
                break;
        }
    }
});

多次点击开始多个事件

3 个答案:

DEMO