IE bug触发点击2个按钮？

Question

我试图在用户按Enter键时触发提交按钮.适用于除Internet Explorer 9之外的所有浏览器.奇怪的是,IE坚持也会触发我从未告诉过的另一个按钮的点击.我做错了什么或如何解决这个问题？

以下是我的代码.在IE中按Enter键会按预期触发提交点击,但由于某种原因也会触发"某个按钮"点击(即使没有我的按键监听器):

$('input[type=submit]').click(function () {
    alert('Submit click');
});

//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
    var keycode = event.keyCode || event.which;
    if (keycode == 13) $('input[type=submit]').click();
});

//ROUTE CLEAR HANDLER
$('button').click(function () {
    alert('Button click');
});

你可以在这里看到bug:http://jsfiddle.net/h64xD/

Answer 1

以下是需要考虑的几件事:

IE9 默认将<button/>元素计为type="submit".因此,要使其不提交,您必须明确:

<button type="button">Some button</button>

如果你这样做,你会注意到模拟click事件现在不会触发<button/>但仍会触发2个事件.原因是,因为你没有明确定义一个<form/>元素,IE9假定控件是一个表单,因此按下enter文本框会触发2个事件:

• 你正在效仿的那个
• 默认表单提交按钮行为

所以再次解决这个问题,你必须明确:

<button type="button">Some button</button>
<form><input type="text" /></form>
<input type="submit" value="Submit" />

现在,这些是您在IE中看到行为的原因.@MrSlayer的回答迎合了第二个问题,即keypress在你使用了令人满意的处理后停止事件preventDefault()

Answer 2

Enter键具有要提交的默认行为,因此您需要阻止执行默认行为.因为button默认情况下,标签type="submit"在按下Enter键时正在执行该按钮.

//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
    var keycode = event.keyCode || event.which;
    if (keycode == 13)
    {
        event.preventDefault();
        $('input[type=submit]').click();
    }
});