使用jquery$(xx).click()激活点击事件，结果点击事件执行了两次。

Question

使用的是jquery 1.11
代码

$(document).on('click','button#test1',function(){
    console.log('button clicked');
});


$(document).keydown(function(event){
    if(event.keyCode == 13){
        console.log('enter');
        $('button#test1').click();
    }
});

如果我直接点击test1这个button，就只输出“button clicked”一次
如果我按下回车，输出一次“enter”，然而接着会输出两次“button clicked”
这是为什么？怎么解决？

Answer 1

上面说的都真事件重复绑定问题,我从代码上没看出开.
问题就在于 如果button是焦点 你按 enter 本身就要出发一次 button的 click事件,然后你再出发 keydown 事件 所以...
请在点击了按钮之后 让 button 失去焦点 然后再按回车 你就知道咋回事了...

---

1、首先，button是焦点的时候，你按下Enter键本身就相当于点击了button，所以触发button的click 事件（这是浏览器的默认行为）。
2、其次，在代码中又同时注册了Enter keydown事件，所以当你按下Enter时又触发了keydown事件 进而触发button click 事件。

回答评论的网友：input失去焦点不是button失去焦点才能阻止触发两次button click事件 我推测你应该是在一个form表单中，浏览器默认会触发 submit 事件。可以查看浏览器默认行为。

---

Answer 2

button获取焦点后有一个默认事件，键盘按enter后会触发一次button的click事件

Answer 3

<script>
        $(document).on('click','button#test1',function(){
            
            console.log('button clicked');
        });
        $(document).keydown(function(event){
            if(event.keyCode == 13){
                event.preventDefault(); 
                console.log('enter');
                $('button#test1').click();
            }
        });
    </script>

取消默认行为

Answer 4

在click事件前加上off("click")，试下，可能要清除点击事件一下

Answer 5

是因为你按得时间太长了吧。如果因为一直按着是会连续触发keydown事件的。

Answer 6

每次绑定前，先取消上次的绑定

$('').unbind('click').click(function () {
    ...
});

http://blog.csdn.net/wangzhe_...

Answer 7

你把绑定的keydown事件先注释，然后点下你的button，再狂按enter，你就知道为什么了

Answer 8

这不是重复绑定的问题吧。

按钮点击之后，处于focus状态,然后你在页面上没有进行任何操作，所以按钮没有失去焦点。

你在触发一次keydown事件的时候，会默认按钮又被点击一次（focus），然后你的keydown又主动触发一次click().

根本不需要重新绑定事件，每次把按钮的焦点去掉就行了。

   $(document).on('click', 'button#test1', function (event) {
        console.log(event);
        event.target.blur();
    });
    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            console.log('enter');
            $('button#test1').click();
        }
    });

Answer 9

button获取焦点了，回车自动触发click事件，解决办法判断一下，怎么判断都可以，定义一个变量记录button是否获取焦点，或者直接判断event等等吧

//...
  $(document).keydown(function (event) {
            if (event.target.id == 'test1') return;
            if (event.keyCode == 13) {
                console.log('enter');
                $('button#test1').click();
            }
        });
//...